Javascript——子项下的状态更改不在父项中持久化

嗨（：我一直在尝试使用一个子-父通信系统，以确保我在子系统中所做的更改显示在父系统中。更具体地说，在我的React应用程序的一个页面中，我希望有一些“切换”对象，我希望能够打开/关闭这些对象，并使这些更改在不同的页面中保持不变。这些是我遵循的原则是：

在我的父级中创建状态：

class dashboard extends Component {
    constructor(props) {
    super(props);
    this.updateObject.bind(this);
}
state = {
    test_dictionary: {'test': false}
};

在父级中定义更新上述状态的函数

updateObject(current_key) {
    var new_state = Object.assign({}, this.state.test_dictionary);
    new_state[current_key] = !new_state[current_key]; // I want to flip the boolean when clicked
    this.setState({test_dictionary: new_state});
}

然后，我将状态和函数（如上所示）从父级传递给子级

<childView test_dictionary={this.state.test_dictionary} updateObject={this.updateObject}/>

最后，一旦我进入子对象，我会尝试使用传递的函数和状态，在每次更改子对象中的开关对象时更新父状态中的字典

<Switch 
    checked={this.props.test_dictionary['test']} 
    onChange={this.props.updateObject.bind('test')}
/>

然而，这并没有达到我期望的效果。我已经阅读了许多不同的例子，介绍了如何建立孩子与家长之间的沟通，我认为这与我的想法非常接近。当我尝试单击Switch对象时，我遇到的错误是：

Uncaught TypeError: Cannot read property 'updateObject' of undefined
at String.handleSelectionChange (childView?9911:28)
at String.handleSelectionChange (createPrototypeProxy.js?9d62b87:44)
at Switch.setChecked (Switch.js?bc7e1ee:54)
at toggle (Switch.js?bc7e1ee:105)
at Object.ReactErrorUtils.invokeGuardedCallback (ReactErrorUtils.js?c23a69d:69)
at executeDispatch (EventPluginUtils.js?46a03e1:85)
at Object.executeDispatchesInOrder (EventPluginUtils.js?46a03e1:105)
at executeDispatchesAndRelease (EventPluginHub.js?2c8fe93:43)
at executeDispatchesAndReleaseTopLevel (EventPluginHub.js?2c8fe93:54)
at Array.forEach (<anonymous>)

Uncaught TypeError:无法读取未定义的属性'updateObject'
at String.handleSelectionChange（儿童视图？9911:28）
在String.handleSelectionChange（createPrototypeProxy.js？9d62b87:44）
在Switch.setChecked（Switch.js？bc7e1ee:54）
at切换（Switch.js？bc7e1ee:105）
位于Object.ReactErrorUtils.invokeGuardedCallback（ReactErrorUtils.js？c23a69d:69）
在executeDispatch（EventPluginUtils.js？46a03e1:85）
在Object.executeDispatchesInoder（EventPluginUtils.js？46a03e1:105）
在执行的DispatchesAndRelease（EventPluginHub.js？2c8fe93:43）
在executeDispatchesAndReleaseTopLevel（EventPluginHub.js？2c8fe93:54）
在Array.forEach（）处

---

如果您能提供任何帮助，我将不胜感激！

我不能100%确定这是原因，但这可能是因为

bind

返回一个新函数，它的

this

上下文设置为您传递它的任何参数。因此，当您执行此操作时：

<Switch 
    checked={this.props.test_dictionary['test']} 
    onChange={this.props.updateObject.bind('test')}
/>

---

注意

onChange

中的arrow函数。这样我们可以创建一个新函数来正确调用回调属性，但是可以传递我们想要的任何参数。

我没有足够的声誉来评论，但是在你完成jered所说的操作之后，你会得到

类型错误：无法读取未定义的属性“test\u dictionary”

我会尝试将

updateObject

更改为箭头函数，因为当它不是箭头函数时，

此

不一定指您正在考虑的

此

尝试将函数更改为：

updateObject = (current_key) => {
    var new_state = Object.assign({}, this.state.test_dictionary);
    new_state[current_key] = !new_state[current_key]; // I want to flip the boolean when clicked
    this.setState({test_dictionary: new_state});
}

---

您似乎将状态放在了一个非常奇怪的位置。这会导致它总是以未定义结束，因为它不在组件的实际范围内

class dashboard extends Component {
    constructor(props) {
      super(props);

      this.state = {
         test_dictonary: { test: false }
      };
      this.updateObject.bind(this);
    }

    updateObject(current_key) {
       const new_key = !this.state.test_dictonary[current_key];
       this.setState({test_dictionary: new_key});
    }

    render() {
      return (
         <childView test_dictionary={this.state.test_dictionary} updateObject={this.updateObject}/>
      )
    }
}

类仪表板扩展组件{
建造师（道具）{
超级（道具）；
此.state={
测试命令：{test:false}
};
this.updateObject.bind（this）；
}
updateObject（当前_键）{
const new_key=！this.state.test_dictional[当前_key]；
this.setState（{test_dictionary:new_key}）；
}
render（）{
返回(
)
}
}

在开关上执行此操作以防止发生有趣的绑定，这是您最初错误的根源

<Switch 
    checked={this.props.test_dictionary['test']}} 
    onChange={() => { this.props.updateObject('test'); }}
/>

{this.props.updateObject（'test'）；}
/>

非常感谢您的反馈！我将其更改为您建议的，现在的错误是：

未捕获类型错误：无法读取未定义的

的属性“test\u dictionary”，而不是

未捕获类型错误：无法读取未定义的

的属性“updateObject”。由此，我假设在我的

updateObject

中>函数，它无法访问我正在尝试访问的

this.state.test\u字典？您有任何进一步的建议吗？我非常感谢您的帮助！
<Switch 
    checked={this.props.test_dictionary['test']}} 
    onChange={() => { this.props.updateObject('test'); }}
/>