在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"));

這里的工作示例。

當我單擊按鈕時，字母'd'應該添加到狀態中的letters 。 這按預期工作。 但是，當狀態發生變化時，字母不會在頁面上更新。

值得注意的是：

<h1>letters: {this.state.letters.reduce((a, l) => a + l, "")}</h1>

要么：

<h1>letters: {this.state.letters.toString()}</h1>

按預期更新頁面。

為什么是這樣？

Answer 1

你需要替換字母的狀態（數組），而不是改變它（ 工作示例 ）。 根據反應文檔 ：不要直接修改狀態。

當您將數組轉換為字符串時，當前字符串與前一個字符串不同，因為字符串是不可變的。 然而，即使您向其添加另一個項目，該陣列仍保持相同的陣列。

例：

 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'] });
}; 

Answer 2

你有答案。 想進一步解釋一下。

你基本上沒有改變狀態。 而反應只能檢測狀態的變化。 現在棘手的部分是你可能會認為你正在更新數組對象，從而改變狀態，但事實並非如此。 原始數組引用永遠不會在狀態中更改，因此不會更改。 因此，要在es6中解決此問題，您可以在addLetter聲明中使用...運算符，如下所示。

addLetter = () => {
    const { letters } = this.state;
    letters.push("d");
    this.setState({ letters:[...letters] });
  };

...運算符基本上克隆了原始對象，是es6的簡寫操作符。

您也可以使用克隆方法，例如Object.assign 。

希望能幫助到你！

Answer 3

我在這里分叉並修復了你的代碼： https ： //codesandbox.io/s/ywnmr47q8z

1）你必須改變新的狀態

2）你必須調用.join("")來從數組構建字符串。 現在它正在運作