我有一些简单的代码:
class App extends React.Component {
state = {
letters: ["a", "b", "c"]
};
addLetter = () => {
const { letters } = this.state;
letters.push("d");
this.setState({ letters });
};
render() {
return (
<div>
<button onClick={this.addLetter}>Click to add a letter</button>
<h1>letters: {this.state.letters}</h1>
</div>
);
}
}
render(<App />, document.getElementById("root"));
工作示例 here .
当我点击按钮时,字母 'd'
应该被添加到状态中的 letters
中。这按预期工作。但是,当状态更改时,这些字母不会像人们预期的那样在页面上更新。
值得注意的是:
<h1>letters: {this.state.letters.reduce((a, l) => a + l, "")}</h1>
或:
<h1>letters: {this.state.letters.toString()}</h1>
按预期更新页面。
这是为什么?
最佳答案
你需要替换字母的状态(数组),而不是改变它(working example)。根据 react docs : 不要直接修改状态。
当您将数组转换为字符串时,当前字符串与前一个字符串不同,因为字符串是不可变的。然而,即使您向它添加另一个项目,该数组仍保持相同的数组。
示例:
const a = [1, 2, 3];
const strA = a.toString();
a.push(4);
const strB = a.toString();
console.log(a === a); // true
console.log(strA === strB); // false
解决方案:从旧数组创建一个新数组。
addLetter = () => {
const { letters } = this.state;
this.setState({ letters: [...letters, 'd'] });
};
关于javascript - 在 JSX 中显示状态列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50106508/