Question

constructor(){
    super();
    this.state = { 
        address: {
            street:null,
            city:null,
            postalCode: null
        }
    };
}
postalCodeChange(e){
    this.setState.address.postalCode = e.target.value;
    console.log(this.state);
}

我试图更新状态，但仅限邮政编码。当上面的代码执行时，我希望得到类似的东西

Object {address: Object {
           street: null,
           city: null,
           postalCode: 'some new value'
} }

但是我收到了错误。怎么了？

Answer 1

要更新状态，您必须使用setState方法

const state = merge({}, this.state, {
  address: { postalCode: e.target.value }
});

this.setState(state);

注意 - merge它不是真正的功能，为了深度合并对象，您可以使用merge-deep，assign-deep等包EM>

或者您可以使用update中的React.addons方法，让此方法执行以下步骤

npm i react-addons-update --save

import（或require）并使用

import update from 'react-addons-update'; const state = update(this.state, { address: { postalCode: { $set: e.target.value } } }); this.setState(state);

Example

如果您使用ES2015，也可以使用Object.assign或spread operator

<强> Object.assign ：

const state = Object.assign({}, this.state, { address: Object.assign({}, this.state.address, { postalCode: 1000 }) });

<强> spread operator

const newState = { address: { ...state.address, postalCode: 1000 } };

Answer 2

我看到你使用的是ES6，所以我假设你也可以使用stage-2 object spread operator。

通过使用该功能，您无需额外的插件或大量代码即可更新您的状态。

this.setState({
    address: {
        ...this.state.address,
        postalCode: e.target.value
    }
});

reactjs如何更新状态

2 个答案: