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

Question

我是反应新手，所以如果我看起来重复但在网上找不到答案，请原谅我。
我正在通过将选中的值推入统计数组来处理反应多值复选框表单，它似乎在 setState 函数中运行良好，首先选中，当它记录在控制台中时，我收到了一个带有新添加值的数组。
但是紧跟在 setState(( 之后，数组值更改为 1 ！！当然，我不能再使用任何高阶函数了。
所以知道为什么会发生这种情况，以及我该如何解决它？！
请找到代码的屏幕截图

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

我按如下方式修复了handelChecked((：

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

Answer 2

嗨，请查看以下示例。我将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;