React 复选框不更新

Question

每次将复选框切换为 true 时，我都想更新一个数组。使用当前代码，如果我单击一个复选框，它将记录它是错误的。即使我刚刚更新了状态。 setState 是否只需要一些时间，就像 API 调用一样？这对我来说没有意义。

 import React, {Component} from 'react';

class Person extends Component {

  constructor(props) {
    super(props);

    this.state = {
      boxIsChecked: false
    };

    this.checkboxToggle = this.checkboxToggle.bind(this);
  }

  checkboxToggle() {
    // state is updated first
    this.setState({ boxIsChecked: !this.state.boxIsChecked });
    console.log("boxIsChecked: " + this.state.boxIsChecked);
    if (this.state.boxIsChecked === false) {
      console.log("box is false. should do nothing.");
    }
    else if (this.state.boxIsChecked === true) {
      console.log("box is true. should be added.");
      this.props.setForDelete(this.props.person._id);
    }

  }

    render() {
        return (
          <div>
            <input type="checkbox" name="person" checked={this.state.boxIsChecked} onClick={this.checkboxToggle} />
            {this.props.person.name} ({this.props.person.age})
          </div>
        );
    }
}

export default Person;

我试过 onChange 而不是 onClick。我觉得我已经在遵循我从 此处 和 此处 阅读的有关基本组件公式的建议。我将 Redux 用于其他值这一事实会影响什么吗？有没有办法只读取复选框是什么，而不是试图控制它？ （复选框本身工作正常，DOM 会更新它是否被正确选中。）

原文由 Gabriel Kunkel 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

setState() 确实没有立即反映出来：

在文档中阅读此处：

setState() 将组件状态的更改排入队列，并告诉 React 该组件及其子组件需要使用更新后的状态重新渲染。这是您用来更新用户界面以响应事件处理程序和服务器响应的主要方法。

将 setState() 视为请求而不是更新组件的即时命令。为了更好地感知性能，React 可能会延迟它，然后在一次传递中更新多个组件。 React 不保证状态更改会立即应用。

setState() 并不总是立即更新组件。它可能会分批更新或将更新推迟到以后。这使得在调用 setState() 之后立即读取 this.state 成为一个潜在的陷阱。相反，使用 componentDidUpdate 或 setState 回调 (setState(updater, callback))，它们都保证在应用更新后触发。如果您需要根据以前的状态设置状态，请阅读下面的 updater 参数。

setState() 将始终导致重新渲染，除非 shouldComponentUpdate() 返回 false。如果正在使用可变对象并且无法在 shouldComponentUpdate() 中实现条件渲染逻辑，则仅在新状态与先前状态不同时调用 setState() 将避免不必要的重新渲染。

这里有一些实验

所以捕获事件并检查它可能会更好，而不是依赖于 this.setState() 类似的东西：

 handleChange: function (event)  {
   //you code
    if (event.target.checked) {
      console.log("box is true. should be added.");
      this.props.setForDelete(this.props.person._id);
    }

  }

和

    render() {
            return (
              <div>
                <input type="checkbox" name="person" checked={this.state.boxIsChecked}
                   onChange={this.handleChange.bind(this)}/>
                {this.props.person.name} ({this.props.person.age})
              </div>
            );
        }

原文由 Battle_Slug 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

我知道此线程已得到解答，但我也有解决方案，您会看到复选框未使用 setState 提供的值进行更新，我不知道此问题的确切原因，但这是一个解决方案。

 <input
  key={Math.random()}
  type="checkbox"
  name="insurance"
  defaultChecked={data.insurance}
 />

通过给随机的键值，复选框被重新渲染并且复选框的值被更新，这对我有用。我也在使用钩子，但它应该适用于基于类的实现。

参考：https: //www.reddit.com/r/reactjs/comments/8unyps/am_i_doing_stupid_or_is_this_a_bug_checkbox_not/

原文由 Nabeel Hussain Shah 发布，翻译遵循 CC BY-SA 4.0 许可协议