Javascript 始终在React应用程序中获取以前的状态

与我以前的工作相比，我这样做是为了存储正确的状态：

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

）将始终获得以前的状态

---

如何获得正确的状态，以便我的

检查所有
功能正常？
我认为更多的是关于您在生命周期中放置此代码的位置
componentDidUpdate
似乎是一个合理的候选者。例如：

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

换句话说，一旦所有框都更新了它们的状态，
checkAll
自然也会更新。
您应该避免在
componentdiddupdate（）
中使用
setState（）
，因为它有时会导致代码中出现错误，被认为不是一种好的做法（例如，如果您使用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

如果使用此.setState（{new state}，//perform some action}），则正在执行的任何操作都将收到state的最新值

复制并粘贴此组件，然后查看控制台以查看它是否接收到正确的状态

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

import React，{Component}来自“React”
类菜单扩展组件{
状态={
checkAll:false，
检查1：错误，
检查2：错误，
检查3：错误
}
handleChange=（）=>{
const all=（this.salmon.checked&&this.tuna.checked&&this.snaper.checked）
如果（全部）{
这是我的国家({
是的，
检查1：这个。鲑鱼。检查过了，
检查2：这个。金枪鱼。检查，
检查3：这个。Snaper。检查
}, () => {
this.all.checked=true
log（'Most current state'，JSON.stringify（this.state））
})
}否则{
这是我的国家({
checkAll:false，
检查1：这个。鲑鱼。检查过了，
检查2：这个。金枪鱼。检查，
检查3：这个。Snaper。检查
}, () => {
this.all.checked=false
log（'Most current state'，JSON.stringify（this.state））
})
}
}
handleAll=（）=>{
这是我的国家({
是的，
检查1：正确，
检查2：正确，
检查3：正确
}, () => {
this.salmon.checked=true
this.tuna.checked=true
this.snaper.checked=true
log（'Most current state'，JSON.stringify（this.state））
})
}
render（）{
返回(
选择选项
全选：
this.all=all}
/>


this.salman=salman}
/>
鲑鱼


this.tuna=tuna}
/>
金枪鱼


this.snaper=snaper}
/>
鲷鱼


)
}
}
导出默认菜单
当你说他们总是会得到以前的状态时，你是什么意思？另外，在你的第一个代码示例中：当checkd1为true时，为什么要将checked1的状态设置为false？@ViktorG这是切换。对于checkbox，当你在onChange（）上单击它时，你必须得到一个相反的值，对吗？你能发布整个
onChange
handler吗？@richcrucher我把我的代码放在onChange（）中了在用户按下复选框Yep后将执行的函数，这对于更新各个复选框的状态是很好的。但是对于
checkedAll
我建议这样做（最终）发生在其他状态更改之后。@ThomasRychtyk我没有将setstate放在componentdiddupdate中。我将它放在onChange（）中在我点击复选框后运行的函数。就像你的答案一样。我认为他建议你不要使用我的答案，这是很公平的，尽管我不认为需要对
componentdiddupdate
中的
setState
制定一条全面的规则，只要你像我一样用现有的状态检查来覆盖它。不过，它会触发额外的r因此，使用受控组件肯定是有意义的。但对于我来说，这不是回调的问题。这是检测的问题。我需要检测是否选中了所有3个类别复选框。当检测使用以前的状态时，我的checkedAll将不正确。我将更新上面的答案，您应该能够复制并粘贴组件添加到代码中。由于
回调
发生在实际设置状态之后，因此您将收到正在查找的值，而不是以前的状态。就检测而言
refs
有助于获取DOM值。请注意，将console.log语句放置在回调中时，实际上返回当前状态，无需创建其他变量（参考原始问题）。希望上面的代码有帮助。
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