使用数组值反应状态，对于多复选框值，在 setState() 之外和之后突变为数字

Question

我是 React 的新手，所以如果我看起来重复但我无法在网上找到答案，请原谅。
我正在通过将选中的值推入 stat 数组来处理多值复选框表单，它在 setState 函数中似乎运行良好，第一次选中时，当它登录到控制台时，我收到了一个包含新添加值的数组。
但在 setState() 之后，数组值直接更改为 1 ！当然，我不能再使用任何高阶函数了。
那么知道为什么会这样吗？我该如何解决它？！
Please find screenshot of the code

import React, { Component } from 'react';

class Test extends Component {
  constructor(props) {
    super(props);
    this.state = {
      nationality: [],
    };
    this.handelChecked = this.handelChecked.bind(this);
  }

  handelChecked(e) {
    let { name, value, checked } = e.target;
    console.log(name, value, checked);
    console.log(this.state.nationality);
    if (checked) {
      this.setState({
        nationality: this.state.nationality.push(value),
      });
    }
    console.log(this.state.nationality);
  }
  render() {
    console.log(this.state.nationality);

    return (
      <>
        <form>
          <label>Nationality</label>
          <br />
          <label>
            <input
              type='checkbox'
              name='nationality'
              value='Japaneses'
              onChange={this.handelChecked}
            />
            Japaneses
          </label>
          <br />
          <label>
            <input
              type='checkbox'
              name='nationality'
              value='Dutch'
              onChange={this.handelChecked}
            />
            Dutch
          </label>
          <br />
          <label>
            <input
              type='checkbox'
              name='nationality'
              value='Egyptian'
              onChange={this.handelChecked}
            />
            Egyptian
          </label>
        </form>
        <div>
          <br />
          <h4>Nationality:</h4>
          <p>{this.state.nationality}</p>
        </div>
      </>
    );
  }
}

export default Test;

Answer 1

您好，请检查下面的示例。我将 setState 与 prevState 一起使用，这是处理代码的主要更改。我还做了一项可选更改，即我从构造函数中删除了 this.handelChecked = this.handelChecked.bind(this); 并使用箭头函数。

import React, {Component} from 'react';

class Test extends Component {
    constructor(props) {
        super(props);
        this.state = {
            nationality: [],
        };
    }

    handelChecked = (e) => {
        let {name, value, checked} = e.target;
        console.log(this.state.nationality);
        if (checked) {
            this.setState(prevState => {
                prevState.nationality.push(value);
                return{
                    nationality: prevState.nationality
                }
            });
        }
        console.log(this.state.nationality);
    };

    render() {
        return (
            <>
                <form>
                    <label>Nationality</label>
                    <br/>
                    <label>
                        <input
                            type='checkbox'
                            name='nationality'
                            value='Japaneses'
                            onChange={this.handelChecked}
                        />
                        Japaneses
                    </label>
                    <br/>
                    <label>
                        <input
                            type='checkbox'
                            name='nationality'
                            value='Dutch'
                            onChange={this.handelChecked}
                        />
                        Dutch
                    </label>
                    <br/>
                    <label>
                        <input
                            type='checkbox'
                            name='nationality'
                            value='Egyptian'
                            onChange={this.handelChecked}
                        />
                        Egyptian
                    </label>
                </form>
                <div>
                    <br/>
                    <h4>Nationality:</h4>
                    <p>{this.state.nationality}</p>
                </div>
            </>
        );
    }
}

export default Test;

Answer 2

我将 handelChecked() 修复如下：

handelChecked(e) {
let { name, value, checked } = e.target;
if (checked) {
  this.setState({
    nationality: [...this.state.nationality, value],
  });
}

使用数组值反应状态，对于多复选框值，在 setState() 之外和之后突变为数字

React state with value of array, for multi checkbox values, mutate outside and after setState() to number

javascript

forms

checkbox

setstate

reactjs