React 状态在推送到数组时未正确更新

Question

我一直在挠头，我想知道为什么我的状态不会更新。 我已经写了一个功能组件，我知道我错过了一些小东西，但我不知道是什么。

目标是更新一个数组，其中包含选中的框的名称(从输入复选框更新(。这是我有的代码

export default function Projects(props) {
const [checkedBoxes, setCheckedBoxes] = useState([]);
const onCheck = box => {
let boxes = [...checkedBoxes];
console.log(`Checking box ${box}`);
if (document.getElementById(box).checked) {
console.log(`Box checked`);
//Add box
boxes.push(box);
} else {
console.log(`Removing box`)
//Remove box
let index = 0;
for (let i = 0; i < boxes.length; i++) {
if (boxes[i] === box)
index = i;
}
boxes.splice(index, 1)
}
console.log(`Boxes is now ${boxes}`)
setCheckedBoxes(boxes);
console.log(`Checked boxes is now: ${checkedBoxes}`)
console.log(`Boxes length: ${boxes.length}`)
console.log(`Checked boxes length: ${checkedBoxes.length}`)
}

控制台.log输出如下：

Checking box box1
Box checked
Boxes is now box1
Checked boxes is now: 
Boxes length: 1
Checked boxes length: 0

任何人都可以提供有关为什么会发生这种情况的任何见解(或给我一个关于如何存储这些信息的更好想法？目标是让用户选中复选框，然后根据选中的框筛选不同的状态(项目列表(。

谢谢

Answer 1

React 状态更新是异步的，因此在设置新状态后立即尝试记录它只会记录当前状态。您可以使用效果在更新后记录状态。请记住将checkedBoxes添加到依赖项数组，以便仅在更新时调用效果的回调。

export default function Projects(props) {
const [checkedBoxes, setCheckedBoxes] = useState([]);
useEffect(() => {
console.log(`Checked boxes is now: ${checkedBoxes}`)
console.log(`Checked boxes length: ${checkedBoxes.length}`)
}, [checkedBoxes]);
const onCheck = box => {
let boxes = [...checkedBoxes];
console.log(`Checking box ${box}`);
if (document.getElementById(box).checked) {
console.log(`Box checked`);
//Add box
boxes.push(box);
} else {
console.log(`Removing box`)
//Remove box
let index = 0;
for (let i = 0; i < boxes.length; i++) {
if (boxes[i] === box)
index = i;
}
boxes.splice(index, 1)
}
console.log(`Boxes is now ${boxes}`)
console.log(`Boxes length: ${boxes.length}`)
setCheckedBoxes(boxes);
}