reactjs - react 复选框。切换复选框时状态迟到

Question

我有一组 3 个复选框和用于检查这 3 个复选框的主复选框。

当我为 选中所有 3 个复选框时主 复选框变为选中状态。

当我选中这 3 个复选框时什么也没有发生，但是当我取消选中其中一棵树时，主 复选框变为选中状态。

有人可以向我解释幕后实际发生的事情并帮助我以某种方式解决 React 状态的谜团吗？谢谢!

这是一个代码片段:

state = {
  data: [
    { checked: false, id: 1 },
    { checked: false, id: 2 },
    { checked: false, id: 3 }
  ],
  main: false,
}

onCheckboxChange = id => {
  const data = [...this.state.data];

  data.forEach(item => {
    if (item.id === id) {
      item.checked = !item.checked;
    }
  })

  const everyCheckBoxIsTrue = checkbox.every(item => item === true);

  this.setState({ data: data, main: everyCheckBoxIsTrue });
}

onMainCheckBoxChange = () => {
  let data = [...this.state.data];

  data.forEach(item => {
    !this.state.main ? item.checked = true : item.checked = false
  })

  this.setState({
    this.state.main: !this.state.main,
    this.state.data: data,
  });
}

render () {
  const checkbox = this.state.data.map(item => (
      <input
        type="checkbox"
        checked={item.checked}
        onChange={() => this.onCheckboxChange(item.id)}
      />
    ))
  }

return (
  <input type="checkbox" name="main" checked={this.state.main} onChange={this.onMainCheckBoxChange} />
  {checkbox}
)

Answer 1

我无法根据您提供的代码制作工作代码片段，问题之一是:

const everyCheckBoxIsTrue = checkbox.every(item => item === true);

哪里 checkbox没有定义。

但是，我认为您对使用旧状态与新状态感到困惑，如果您清楚地命名它会更容易区分，例如:

eventHandler() {
  const { data } = this.state; // old state

  const newData = data.map(each => ...); // new object, soon-to-be new state

  this.setState({ data }); // update state
}

这是一个工作示例供您引用:

class App extends React.Component {
  state = {
    data: [
      { checked: false, id: 1 },
      { checked: false, id: 2 },
      { checked: false, id: 3 }
    ],
    main: false,
  }
  
  onCheckboxChange(id) {
    const { data } = this.state;
    
    const newData = data.map(each => {
      if (each.id === id) {
        // Toggle the previous checked value
        return Object.assign({}, each, { checked: !each.checked });
      }
      return each;
    });
    
    this.setState({
      data: newData,
      // Check if every checked box is checked
      main: newData.every(item => item.checked === true),
    });
  }
  
  onMainCheckBoxChange() {
    const { main, data } = this.state;
     
    // Toggle the previous main value
    const newValue = !main;

    this.setState({
      data: data.map(each => Object.assign({}, each, { checked: newValue })),
      main: newValue,
    });
  }
  
  render () {
    const { data, main } = this.state;

    return (
      <div>
        <label>Main</label>
        <input
          type="checkbox"
          name="main"
          // TODO this should be automatically checked instead of assigning to the state
          checked={main}
          onChange={() => this.onMainCheckBoxChange()}
        />
        {
          data.map(item => (
            <div>
              <label>{item.id}</label>
              <input
                type="checkbox"
                checked={item.checked}
                onChange={() => this.onCheckboxChange(item.id)}
              />
            </div>
          ))
        }
      </div>
    );
  }
}

ReactDOM.render(
  <App />
, document.querySelector('#app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="app"></div>

Side note: You might want to consider not to use the main state