reactjs如何更新状态

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

我正在尝试更新状态，但仅限postalCode。当上面的代码执行时，我希望得到这样的东西

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

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

1. npm i react-addons-update --save
2. 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 }
};