时间戳

首页 > 解决方案 > 使用 Hooks (useState) 向数组添加/删除

arrays - 使用 Hooks (useState) 向数组添加/删除

问题描述

我正在尝试在 React-Native 中创建宾果游戏。Bingo Grid 中的每个按钮都是一个带有整数 ID 的 TouchableOpacity。我的想法是将按下的按钮添加到数组或从数组中删除，这取决于它是否被选择用于宾果游戏（使用按钮的颜色）。

截至目前，当我打开应用程序并单击一次按钮（将其标记为选中）时，控制台会记录一个空数组。当我再次单击它（取消选择它）时，控制台会记录该按钮的 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"] 的数组，然后通知获胜。

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

标签： arraysreact-nativestatereact-hooksmobile-application

解决方案

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

您需要将此条件检查 ( checkWin) 绑定在 auseEffect中，这将依赖于您的数组marked。

像这样的东西。。

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


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

推荐阅读