我正在尝试实现一个OnChange事件,其中i子组件更新属性,OnChange甚至调用在该状态下更新该属性的父方法。
我的子对象是使用一个支柱创建的,该支柱指向父级中的onChange事件:
<ChildComponent data={this.state.data} onChange={this.handleStateUpdate} />
我在父级中的handleStatusUpdate看起来像这样:
handleStateUpdate(property, value) {
console.log("Client index OnChange event called, " + property, value);
console.log("Before property update", this.state.data);
const stateCopy = { ...this.state.data };
stateCopy[property] = value;
console.log("Property updated...", stateCopy);
// Set the value.
this.setState({stateCopy}, () => {"New State: ", this.state.data});
console.log("New state: ", this.state)
}
它接受要作为字符串更新的属性的名称,以及新值。
在孩子中,我有一个简单地调用props OnChange事件的方法,传递要更改的属性的名称,然后输入值:
handleNameChange (e) { this.props.onChange('name', e.target.value); }
在handleStatusUpdate方法上,当我进行更改时,第一个日志行按预期显示属性名称和值。
&#34; New State&#34;的日志反映了正确的变化。即我的名字属性更新为&#39;值&#39;值。
但是“新州”#39;显示旧值。似乎是“SetState”&#39;没有更新任何东西。这个方法有什么问题,会阻止状态按预期更新吗?
答案 0 :(得分:3)
通过致电this.setState({stateCopy})
,您要在名为state
的{{1}}上放置一个属性,这样您就拥有stateCopy
。这个简写符号是为了避免在变量名称与属性匹配时的重复,例如this.state.stateCopy
变为{ someProp: someProp }
。你只需要这样做:
{ someProp }
答案 1 :(得分:1)
React的setState是异步的,因此您仍然可以获得当前状态。
由于回调,这显示正确的值。
FirebaseCore
在状态改变之前调用它,因此它仍然具有旧值。
this.setState({stateCopy}, () => {"New State: ", this.state.data});