使用 Hooks (useState) 向数组添加/删除答案

【问题标题】：Add / Remove to Array using Hooks (useState)使用 Hooks (useState) 向数组添加/删除
【发布时间】：2020-06-03 02:27:32
【问题描述】：

我正在尝试在 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"] 填充的数组，然后通知获胜。

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

【问题讨论】：

标签： arrays react-native state react-hooks mobile-application

【解决方案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);
    }
}

【讨论】：