Question

我正在尝试使用传播操作符循环为嵌套对象中处于状态的多个字段设置新值，但是它仅适用于最后一个字段。

我有一个数组“ formFields”，其中包含我要覆盖的值的字段名称。我使用map（）将数组中的每个元素与状态字段进行比较，并将其值切换为“ true”。但是它仅更改数组中最后一个字段的值-“评论”。

constructor() {
    super();
    this.state = {
        fields: {
            time: false,
            date: false,
            quantity: false,
            comment: false,
        },
    }
}

getFormFields() {
    const formFields = ["time", "quantity", "comment"];
    formFields.map(item => {
        this.setState({
            ...this.state.fields,
            [item]: true
        })
    });
}

我该怎么做才能覆盖我想要的所有字段的值？

Answer 1

由于您正在循环更改状态，并且您设置的每个状态都包含仅更改的原始项目，因此最新更改将覆盖前一个更改。而是使用更改创建一个新的状态对象，然后一次对对象进行setState：

getFormFields() {
  const formFields = ["time", "quantity", "comment"];
  this.setState(formFields.reduce((r, item) => ({
    ...r,
    [item]: true
  }), {}));
}

btw-如果要设置为true的字段始终相同，则可以手动创建对象并进行设置：

getFormFields() {
  this.setState({
      time: true,
      quantity: true,
      comment: true,
  });
}

如何使用传播算子在循环中设置setState（）

1 个答案: