Добавить / удалить в массив с помощью хуков (useState) - PullRequest
Новая
       29

Добавить / удалить в массив с помощью хуков (useState)

1 голос
/ 19 февраля 2020

Я пытаюсь создать игру Bin go в React-Native. Каждая кнопка в сетке Bin go представляет собой TouchableOpacity с целочисленным идентификатором. Моя идея заключалась в том, чтобы нажатие кнопки добавлялось в массив или удалялось из массива, в зависимости от того, была ли она выбрана для игры bin go (с использованием цвета кнопки).

Как прямо сейчас, когда я открываю приложение и нажимаю кнопку один раз (отмечая ее как выбранную), консоль записывает пустой массив. Когда я нажимаю на нее снова (отменив выбор), консоль записывает идентификатор этой кнопки. Это происходит отдельно со всеми кнопками, когда я нажимаю на них, а не все вместе, ссылаясь на один массив.

Мой код сейчас: 

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"], а затем уведомляет о выигрыше.

Любая помощь / руководство очень ценится!

1 Ответ

0 голосов
/ 19 февраля 2020

Обновление переменных состояния выполняется не сразу, а это означает, что когда вы вызываете 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);
    }
}
...