javascript - 在 JSX 中显示状态列表

Question

我有一些简单的代码:

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>

按预期更新页面。

这是为什么？

Answer 1

你需要替换字母的状态(数组)，而不是改变它(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'] });
};