Javascript 使用数组的值对状态进行反应，对于多个复选框值，在setState（）之外和之后变异为number

我是REACTE的新手，请原谅，如果我看起来很重复，但我在网上找不到答案。
我正在处理react多值复选框表单，方法是将选中的值推到stat数组中，它似乎在setState函数中运行良好，第一次选中时，在控制台中登录时，我收到了一个带有新附加值的数组。
但是直接在setState（）之后，数组值就变为1！！当然，我不能再使用任何高阶函数了。
你知道为什么会这样吗？我该怎么解决

import React，{Component}来自'React'；
类测试扩展了组件{
建造师（道具）{
超级（道具）；
此.state={
国籍：[]，
};
this.handelChecked=this.handelChecked.bind（this）；
}
手工检查（e）{
设{name，value，checked}=e.target；
console.log（名称、值、选中）；
console.log（此.状态.国籍）；
如果（选中）{
这是我的国家({
国籍：这个。国家。国籍。推动（价值观），
});
}
console.log（此.状态.国籍）；
}
render（）{
console.log（此.状态.国籍）；
返回(
国籍


日本人


荷兰的


埃及的


国籍：
{本州国籍}

);
}
}
导出默认测试；

您好，请检查下面的示例。我将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;

import React，{Component}来自'React'；
类测试扩展了组件{
建造师（道具）{
超级（道具）；
此.state={
国籍：[]，
};
}
手工检查=（e）=>{
设{name，value，checked}=e.target；
console.log（此.状态.国籍）；
如果（选中）{
this.setState（prevState=>{
国家、民族、推动（价值）；
返回{
国籍：国家国籍
}
});
}
console.log（此.状态.国籍）；
};
render（）{
返回(
国籍


日本人


荷兰的


埃及的


国籍：
{本州国籍}

);
}
}
导出默认测试；
我修复handelChecked（）如下：

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

1） 请以文本形式发布代码，而不是图像。2） 您正在通过调用
this.state.national.push（）
来改变state。3） 状态更新是异步的，因此即使更新正确，更新后立即出现的
console.log
也不会有可用的更新值。
push
。请把代码作为代码，而不是图片，更不用说图片的链接了。好的，谢谢大家，这似乎是一个完全错误的方法。谢谢哈比尔，这是工作，但复制了值，我得到了[荷兰，荷兰，埃及，埃及]，我把它改成以下国籍：[…this.state.national，value]，
handelChecked（e）{let{name，value，checked}=e.target；if（checked）{this.setState（{national:[…this.state.national，value]，}）；}
@Alaa谢谢you@Alaa，你为什么要撤销答案？有什么问题吗？我没有。我可能错了
handelChecked(e) {
let { name, value, checked } = e.target;
if (checked) {
  this.setState({
    nationality: [...this.state.nationality, value],
  });
}