Question

我看到了很多有关从子组件更新父母状态的问题，但是我的问题恰恰相反。我有一个组件，一个模式编辑窗口，用于修改以父项状态存储的对象。如果用户保存这些更改，我只希望将这些更改复制到父级，这由我传递给子组件的函数来处理。当前，无论何时我对子对象中的prop.obj进行更改，该更改都会由父级在重新渲染时获取。

这是我的变更处理程序之一的示例

handleChange(e) {
    this.state.childobj.myvaluetochange = e.target.value
}

如上所述，在我的父母中，我将obj的状态从父母的状态传递给孩子

<MyComponent obj={this.state.obj} />

总结：

我将状态对象发送给孩子

孩子使用this.props.obj在表单中使用此obj，并使用处理程序进行更新

在子项中获取更改时，它们会在更新时反映父项的状态对象-我不希望这样做，除非他们选择保存。（由父级传递的函数处理）

澄清一下，我希望传递给孩子的状态obj驻留在孩子中时充当完全独立的对象。这可能吗？

谢谢

Answer 1

之所以会这样，是因为您正在突变给定的道具。

为避免这种情况，您应该创建“ this.props.obj”的新实例。可能您想在“ componentWillMount”和“ componentWillReceiveProps”生命周期方法中执行此操作。要创建对象的新实例，可以使用Object.assign或散布运算符。

Answer 2

您正在创建到父对象的链接，然后更改将在父对象中反映的状态。解决此问题的一种简单方法是使用散布运算符创建新对象来创建它的新版本：

this.state = {childObj: {...this.props.obj}}

如何断开子道具与传入的父母的状态？

2 个答案: