使用这些动态输入处理React中的状态

Question

有没有办法解决这个问题？

---

如何在下面的代码中复制问题？

1. 点击＃9和＃8旁边的Show Message
2. 您将能够在块8和9中看到一条消息
3. 现在单击Add Block，您将在块10和9中看到消息，而在块8中的消息将消失。

我的假设：我认为这是预期的React State行为，它将根据其索引保存状态，但是有没有办法实现预期的行为？

---

class App extends React.Component {
  state = {
    comments: [9, 8, 7, 6, 5, 4, 3, 2, 1, 0]
  };

  addNumbers = () => {
    var comments = this.state.comments;
    var commentsLength = this.state.comments.length;
    comments.unshift(commentsLength);
    this.setState({ comments });
  };

  render() {
    return (
      <div>
        <p
          style={{
            marginLeft: 20,
            background: "royalblue",
            width: 130,
            color: "white",
            padding: "10px 20px",
            textAlign: "center",
            borderRadius: 10,
            cursor: "pointer"
          }}
          onClick={this.addNumbers.bind(this)}
        >
          Add Block
        </p>
        {this.state.comments.map(single => (
          <Block singleDigit={single} />
        ))}
      </div>
    );
  }
}

class Block extends React.Component {
  state = {
    showMessage: false
  };

  render() {
    return (
      <div style={{ paddingLeft: 20, paddingRight: 20, paddingTop: 10 }}>
        <div
          style={{
            border: "2px solid rgba(0,0,0,0.2)",
            borderRadius: 10,
            height: 70,
            padding: 10
          }}
        >
          <div style={{ display: "flex", justifyContent: "space-around" }}>
            <div>{this.props.singleDigit}</div>
            <div
              style={{ cursor: "pointer" }}
              onClick={() => {
                this.setState({ showMessage: true });
              }}
            >
              Show Message
            </div>
          </div>
          {this.state.showMessage && <h3>HERE IS THE MESSAGE</h3>}
        </div>

        <div />
      </div>
    );
  }
}
ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Answer 1

将密钥添加到<Block/>组件

class App extends React.Component {
  state = {
    comments: [9, 8, 7, 6, 5, 4, 3, 2, 1, 0]
  };

  addNumbers = () => {
    var comments = this.state.comments;
    var commentsLength = this.state.comments.length;
    comments.unshift(commentsLength);
    this.setState({ comments });
  };

  render() {
    return (
      <div>
        <p
          style={{
            marginLeft: 20,
            background: "royalblue",
            width: 130,
            color: "white",
            padding: "10px 20px",
            textAlign: "center",
            borderRadius: 10,
            cursor: "pointer"
          }}
          onClick={this.addNumbers.bind(this)}
        >
          Add Block
        </p>
        {this.state.comments.map(single => (
          <Block key={single} singleDigit={single} />
        ))}
      </div>
    );
  }
}

class Block extends React.Component {
  state = {
    showMessage: false
  };

  render() {
    return (
      <div style={{ paddingLeft: 20, paddingRight: 20, paddingTop: 10 }}>
        <div
          style={{
            border: "2px solid rgba(0,0,0,0.2)",
            borderRadius: 10,
            height: 70,
            padding: 10
          }}
        >
          <div style={{ display: "flex", justifyContent: "space-around" }}>
            <div>{this.props.singleDigit}</div>
            <div
              style={{ cursor: "pointer" }}
              onClick={() => {
                this.setState({ showMessage: true });
              }}
            >
              Show Message
            </div>
          </div>
          {this.state.showMessage && <h3>HERE IS THE MESSAGE</h3>}
        </div>

        <div />
      </div>
    );
  }
}
ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>