ReactJS如何更新状态

2023-12-14

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'
} }

但我得到了错误。怎么了?


为了更新状态,您必须使用setState method

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

this.setState(state);

Note - merge它不是真正的函数,为了深度合并对象,您可以使用类似的包merge-deep, assign-deep

或者你可以使用update方法来自React.addons,要获得此方法,请执行以下步骤

  1. npm i react-addons-update --save
  2. import(or 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, or 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 }
};
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

ReactJS如何更新状态 的相关文章

随机推荐