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

Question

Is there a way to solve this issue?

---

How to replicate the problem in the code below?

1. Click on Show Message next to #9 and #8
2. You will be able to see a message in block 8 and 9
3. Now click on Add Block , you will see the message in block 10 and 9 and the message in block 8 will go away.

My assumption : I think it's an expected React State behavior, that it will save the state based on its index, but is there a way to achieve the expected behavior?

---

 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

Add key to the <Block/> Component

 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>