使用钩子添加/删除到数组(useState)

Question

我正在尝试在React-Native中创建宾果游戏。宾果游戏网格中的每个按钮都是具有整数 ID 的可触摸不透明度。我的想法是将按钮添加到数组或从数组中删除，具体取决于是否为宾果游戏选择了它(使用按钮的颜色)。

截至目前，当我打开应用程序并单击一个按钮一次(将其标记为选中)时，控制台会记录一个空数组。当我再次单击它(取消选择它)时，控制台会记录该按钮的 ID。当我单击所有按钮时，所有按钮都会单独发生这种情况，而不是全部引用一个数组。

我现在的代码：

const sol1 = ['1', '5', '21', '25'];
const [color, setColor] = useState('white');
const [marked, setMarked] = useState([]);
const addButton = (tapID) => setMarked(marked => [...marked, tapID]);
const removeButton = (tapID) => {
let name = tapID;
setMarked(marked.filter((tapID)=>(tapID !== name)))
};
const checkWin = () => {
if (marked.length === null) {
console.log("nothing");
} else {
var containsAll = sol1.every(i => marked.includes(i));
if (containsAll  === true){
console.log("win");
}
console.log("WOAH");
}
}
const markPlay = () => {
if (color === 'white'){
setColor('#b8b8ab');
addButton(tapID);
console.log(marked);
checkWin()
} else {
setColor('white');
removeButton(tapID);
console.log(marked);
checkWin()
}
}

这就是我选择所有 4 个角然后取消选择它们时输出的样子。

LOG  WOAH
LOG  []
LOG  WOAH
LOG  []
LOG  WOAH
LOG  []
LOG  WOAH
LOG  []
LOG  WOAH
LOG  ["1"]
LOG  WOAH
LOG  ["5"]
LOG  WOAH
LOG  ["21"]
LOG  WOAH
LOG  ["25"]
LOG  WOAH

相反，我希望它只显示一个填充 ["1"、"5"、"21"、"25"] 的数组，然后通知获胜。

任何帮助/指导都非常感谢！

Answer 1

更新状态变量不是立即完成的，这意味着当您调用addButton在marked数组中添加标记时，它不会立即完成，因此您在下一个console.log看到这个空数组。

您需要将此条件检查(checkWin)绑定到一个useEffect中，该将依赖于您的数组marked。

像这样的东西..

useEffect(() => {
console.log(marked);
checkWin()
}, [marked])

const markPlay = () => {
if (color === 'white'){
setColor('#b8b8ab');
addButton(tapID);
} else {
setColor('white');
removeButton(tapID);
}
}