Question

我有这个工厂方法为每个变更处理程序创建函数：

makeHandleChange = changedProperty => newVal => {
    const newState = { ...this.state, [changedProperty]: newVal };
    this.setState({ ...newState });
  };

例如，它正在执行：

onChange={this.makeHandleChange('phoneNumber')}

如何使用此功能设置属性对象的状态？

例如，我必须setState info.phoneNumber属性：

state = {
    info: {
       phoneNumber: '',
    },
}

如何使用此makeHandleChange函数来做到这一点？

Answer 1

有两种方法可以使它起作用。一种是更新您的工厂代码，以便它考虑嵌套状态属性。另一种方法（可能是更简单的方法）是在需要更新状态时传入整个嵌套对象。

例如，如果您有一个import * as Vibrant from 'node-vibrant'; //... doStuffWithPalette = (imgSrc) => { Vibrant.from(imgSrc).getPalette() .then(palette => { // do what ever you want with palette, even setState if you want to, just avoid calling it from a render/componentWillUpdate/componentDidUpdate to avoid having the same error you've got in the first place }) .catch(error => { // handle errors }); }字段来更新嵌套在input中的phoneNumber属性：

this.state.info

在传递给函数的对象中，请确保在设置新值之前破坏<input type="text" onChange={e => this.makeHandleChange("info")({ ...this.state.info, phoneNumber: e.target.value})} value={this.state.phoneNumber} />（即this.state.info），以使其他嵌套属性都不会被覆盖/删除。

Answer 2

您可以通过破坏先前的info状态属性来完成以下操作：

makeHandleChange = changedProperty => newVal => {
    this.setState(prev => ({ info: { ...prev.info, [changedProperty]: newVal } }));
};

此解决方案使用setState的回调版本。

它等效于以下代码：

makeHandleChange = changedProperty => newVal => {
    const { info } = this.state
    this.setState({ info: { ...info, [changedProperty]: newVal }});
};

设置对象属性的状态

2 个答案: