在JSX中显示状态列表

Question

I have some simple code:

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

Working example here .

When I click the button, the letter 'd' should be added to the letters in state. This works as intended. However, the letters do not update on the page as one would expect when state changes.

It's worth noting that:

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

or:

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

do update the page as expected.

Why is this?

Answer 1

You need to replace the letter's state (the array), instead of mutating it ( working example ). According to the react docs : Do Not Modify State Directly.

When you're converting the array to a string, the current string is different from the previous string because strings are immutable. The array however stays the same array even if you add another item to it.

Example:

 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 

Solution: create a new array from the old one.

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

Answer 2

You have got an answer though. Would like to explain it a bit further.

You are basically not changing the state ever. And react only detects the changes in state. Now tricky part is that you might be thinking that you are updating the array object and hence changing the state but that's not true. The original array reference is never changed in state and hence no change. So, to solve this in es6 you could use ... operator as follows in your addLetter declaration.

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

... operator basically clones the original object and is a short hand operator from es6 .

You could use clone method as well eg Object.assign .

Hope it helps!

Answer 3

I've forked and fixed your code here: https://codesandbox.io/s/ywnmr47q8z

1) You have to mutate the new state

2) you have to call .join("") to build string from array. now it is working