javascript - 始终在React应用中获得以前的状态

关于我以前的question，我这样做是为了存储正确的状态：

if (value === 'checkpoint')
{
  if (checked1)
  {
    this.setState({checked1 : false})
    localStorage.setObject('checked1', false)
  }
  else
  {
    this.setState({checked1 : true})
    localStorage.setObject('checked1', true)
  }
}

现在，我有多个复选框（假设我有四个）。一个用于所有复选框，其他三个用于类别。我希望我的应用程序能够检测到何时选中了三个类别复选框，并自动选中了所有复选框。如果未选中任何类别复选框，则“全部”复选框将自行取消选中。

我尝试了这段代码：

  if (checked1 && checked2 && checked3) {
    this.setState({checkedAll: true})
  } else {
    this.setState({checkedAll: false})
  }

但是其他3个复选框（checked1, checked2, checked3）将始终具有以前的状态。

如何获得正确的状态，以便我的checkedAll正常运行？

最佳答案

您应该避免在setState()中使用componentDidUpdate()，因为它有时会导致代码中的错误，并且不被认为是一种好习惯（例如，https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-did-update-set-state.md，因此，如果您使用airbnb规则来配置eslint，则也会遇到一些问题减少警告）。

您不能像这样使所有四个复选框受控的输入吗：

      <input
        type="checkbox"
        id="ch1"
        value="1"
        checked={this.state.ch1}
        onChange={this.onCheckboxChange}
      /> Ch1

      <input
        type="checkbox"
        id="ch2"
        value="1"
        checked={this.state.ch2}
        onChange={this.onCheckboxChange}
      /> Ch2

      <input
        type="checkbox"
        id="ch3"
        value="1"
        checked={this.state.ch3}
        onChange={this.onCheckboxChange}
      /> Ch3

      <input
        type="checkbox"
        id="chall"
        value="1"
        checked={
          this.state.ch1
          && this.state.ch2
          && this.state.ch3
        }
        onChange={this.onCheckboxChange}
      /> Ch all

然后在onCheckboxChange（或任何名称）中执行以下操作：

const { id } = e.target;

if (id === 'chall') {
  if (e.target.checked) {
    this.setState({
      ch1: true,
      ch2: true,
      ch3: true,
    });
    return;
  }

  this.setState({
    ch1: false,
    ch2: false,
    ch3: false,
  });
}

this.setState({
  [id]: e.target.checked,
});

关于javascript - 始终在React应用中获得以前的状态，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47643160/