总是在 React 应用程序中获取先前的状态

Question

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

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

现在我有多个复选框（假设我有四个）。一个用于所有复选框，另外 3 个用于类别。我希望我的应用程序检测三个类别复选框何时被选中，并自动选中 ALL 复选框。当任何类别复选框未选中时，ALL 复选框将自行取消选中。

我试过这段代码：

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

但其他 3 个复选框 (checked1, checked2, checked3) 将始终获得以前的状态。

如何获得正确的状态以使我的checkedAll 正常工作？

Answer 1

如果你使用 this.setState({new state}, //perform some action})，任何正在执行的动作都会收到最新的状态值。

复制并粘贴此组件并查看控制台以查看它正在接收正确的状态

import React, { Component } from 'react'

class Menu extends Component {
  state = {
    checkAll: false,
    check1: false,
    check2: false,
    check3: false
  }

  handleChange = () => {
    const all = (this.salmon.checked && this.tuna.checked && this.snapper.checked)
    if (all) {
      this.setState({
        checkAll: true,
        check1: this.salmon.checked,
        check2: this.tuna.checked,
        check3: this.snapper.checked
      }, () => {
        this.all.checked = true
        console.log('Most current state', JSON.stringify(this.state))
      })
    } else {
      this.setState({
        checkAll: false,
        check1: this.salmon.checked,
        check2: this.tuna.checked,
        check3: this.snapper.checked
      }, () => {
        this.all.checked = false
        console.log('Most current state', JSON.stringify(this.state))
      })
    }
  }

  handleAll = () => {
    this.setState({
      checkAll: true,
      check1: true,
      check2: true,
      check3: true
    }, () => {
      this.salmon.checked = true
      this.tuna.checked = true
      this.snapper.checked = true
      console.log('Most current state', JSON.stringify(this.state))
    })
  }

  render() {
    return (
      <div>
        <h1>Select Options</h1>
        <form>
          <span>
            Select All:
            <input
              onChange={this.handleAll}
              type="checkbox"
              value={this.state.checkAll}
              ref={all => this.all = all}
            />
          </span>
          <ul>
            <li>
              <input
                onChange={this.handleChange}
                type="checkbox"
                value={this.state.check1}
                ref={salmon => this.salmon = salmon}
              />
              Salmon
            </li>
            <li>
              <input
                onChange={this.handleChange}
                type="checkbox"
                value={this.state.check2}
                ref={tuna => this.tuna = tuna}
              />
              Tuna
            </li>
            <li>
              <input
                onChange={this.handleChange}
                type="checkbox"
                value={this.state.check3}
                ref={snapper => this.snapper = snapper}
              />
              Snapper
            </li>
          </ul>
        </form>
      </div>
    )
  }
}

export default Menu

Answer 2

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

你不能让所有四个复选框都像这样控制输入吗：

      <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,
});

Answer 3

我认为更重要的是您在生命周期中放置此代码的位置。 componentDidUpdate 似乎是一个合理的候选人。例如：

componentDidUpdate () {
  const { checked1, checked2, checked3 } = this.state
  const checkedAll = checked1 && checked2 && checked3
  if (checkedAll === this.state.checkedAll) {
    return
  }
  this.setState({ checkedAll })
}

换句话说，一旦盒子都更新了它们的状态，checkAll 自然也会更新。