根据名称更新状态属性

时间:2018-06-17 03:14:53

标签: javascript reactjs

我正在尝试实现一个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;没有更新任何东西。这个方法有什么问题,会阻止状态按预期更新吗?

2 个答案:

答案 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});