使用变量作为键时，如何使用扩展运算符设置状态？答案

【问题标题】：How to set state with spread operators, when using variables for keys?使用变量作为键时，如何使用扩展运算符设置状态？
【发布时间】：2019-03-24 07:45:23
【问题描述】：

我有一个特定的状态，例如：

    this.state = {
     receipts: {
       qwer12r: {color: 'red', size: '20'}
       qas123e: {color: 'green', size: '21'}
    }
   };

这些值是从两种不同的形式收集的。因此，键对应于不同的表单 ID。表单有下拉列表，我从中成功返回了 formID 和选定的值。

但是，使用 formID，我想深入研究 formID 对象并仅更新其中一个属性。

组件的结构使得子级是表单，父级是表单创建者/复制者。

这意味着需要将更改函数传递给孩子们以检索他们的formID，并相应地更新正确的状态，属于正确的表单。

我以多种不同的方式尝试了扩展运算符，但都未能产生预期的结果。

在父级这是我已经尝试过的：

handleChange(formNumber, value) {
    this.setState(prevState => ({
      receipts: {
        ...prevState.receipts,
        [formNumber]: {
          ...prevState.formNumber,
          color: value
        }
      }
    }));

还有这个：

handleChange(formNumber, value) {
    this.setState(prevState => ({
      receipts: {
        ...prevState.receipts,
        [formNumber]: {
          ...`prevState.receipts.${formNumber}`,
          color: value
        }
      }
    }));

还有这个：

handleChange(formNumber, value) {
    this.setState(prevState => ({
      receipts: {
        ...prevState.receipts,
        [formNumber]: {
          ...`prevState.${formNumber}`,
          color: value
        }
      }
    }));

在孩子身上：这是附加到表单中颜色下拉列表的 onChange 的处理程序：

onChange={value =>this.handleValueChange(this.props.formNumber, value)}

这是方法定义：

handleValueChange= (formId, value) => {
    this.props.handleformColorChange(formId, value);
  };

如果子窗体调用handleChange方法如handleChange('qwer12r', 'blue'),

预期结果：

this.state = {
receipts: {
   qwer12r: {color: 'blue', size: '20'}
   qas123e: {color: 'green', size: '21'}
}
};

【问题讨论】：

标签： reactjs variables setstate

【解决方案1】：

使用括号符号访问收据

handleChange(formNumber, value) {
    this.setState(prevState => ({
        receipts: {
            ...prevState.receipts,
            [formNumber]: {
                ...prevState.receipts[formNumber],
                color: value
            }
        }
    }));

【讨论】：

【解决方案2】：

这可能会有所帮助。

handleChange(formId, value) = () => {
   this.setState({
       [formId] : {
          ...this.state[formId],
          color: value
       }
   )}
}

【讨论】：

【解决方案3】：

您可以通过括号表示法检索属性，下面是相同的简单实现。

class Parent extends Component {
  constructor() {
    super()
    this.state = { receipts: { firstForm: { color: "" } } }
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(formNumber, value) {
    this.setState(prevState => ({
         receipts: {
          ...prevState.receipts,
          [formNumber]: {
            ...prevState[formNumber],
            color: value
          }
       }
    }));
  }

  render() {
    console.log(this.state)
    return (
      <Child formNumber="firstForm"
        handleformColorChange={this.handleChange}
        value={this.state.receipts.firstForm.color}></Child>
    )
  }
}

【讨论】：