改变儿童状态

Question

我的反应应用程序中有两个组件，一个是父组件，第二个组件是子组件。

我将fakedata状态作为道具传递给子，然后在子组件中将其保存为子组件的状态。但是，当我改变孩子的某些东西时，它会对父母状态产生影响而我不希望这样，我希望它只会影响孩子的状态。

这就是我从父母那里调用子组件的方式：

<FakeDataAddEditComponent  {...this.props} fakedata={{...this.state.fakedata}} />

在子组件中，这就是我将fakedata道具设置为状态的方式：

  componentDidMount() {
     this.setState({fakedata:{...this.props.fakedata}},()=>{

     })
}

但是当我在孩子中改变fakedata状态时，它也会在父母的fakedata中更改，我不希望这样。

Answer 1

要直接回答您的问题，您看到此行为的原因是因为Javascript将对原始对象的引用沿着props传递到子组件的状态。更新子组件时，它与父项保持的实例相同。

要解决此问题，您应该使用Object.assign制作对象的副本，但请务必使用嵌套对象时遇到问题。

此外，如果父对象在子状态更改后以任何方式改变状态，它将把旧对象作为道具传递给子对象。 一般来说，你会尝试做一些你不应该做的事情，因为你会遇到麻烦。

在较高的层面上，你应该寻找像Redux of Flux这样的正确的状态管理解决方案。