javascript - 通过子组件响应状态更新

Question

我在一个项目中遇到了这个问题，并且能够在这个 jsfiddle 中重新创建这个问题。 。当子组件的状态更新时，父组件的状态似乎也在改变，这是怎么回事？

父类:

class ParentComponent extends React.Component{

constructor(props){
    super(props)

    this.state = {objectList:[
        {value1:1}
    ]}
}


render(){
    return <div>
        { this.state.objectList.map(object=>{
        return <ChildComponent object={object} />
    })}
    <button onClick={()=>{console.log(this.state.objectList[0].value1)}}>print value</button>
    </div>

}

子类:

class ChildComponent extends React.Component{
constructor(props){
    super(props)
    this.state = {object:this.props.object}
}

render(){
    return <button onClick={()=>{this.updateObject()}}>+1</button>
}

updateObject(){
    let object = this.state.object
    object.value1+=1
    this.setState({object})
}

}

Answer 1

您正在改变父状态。您应该创建一个全新的对象来避免这个问题。像这样的东西应该有效:

updateObject(){
    let object = {...this.state.object, value1: this.state.object.value1 + 1};
    this.setState({object})
}