设置对象属性的状态

Question

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

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

它正在执行，例如：

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

如何使用此函数设置属性对象的状态？

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

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

我怎样才能用这个makeHandleChange函数做到这makeHandleChange ？

Answer 1

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

例如，如果您有一个input字段更新嵌套在this.state.info的phoneNumber属性：

    <input
      type="text"
      onChange={e => this.makeHandleChange("info")({ ...this.state.info, phoneNumber: e.target.value})}
      value={this.state.phoneNumber}
    />

在传递给函数的对象中，确保在设置新值之前销毁this.state.info （即...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 }});
};