ReactJs UseState: вставить элемент в массив без обновления

Question

Я пытаюсь использовать React Hooks, но каким-то образом мое состояние не обновляется. Когда я нажимаю на флажок (см. В примере), я хочу, чтобы индекс последнего был добавлен в массив selectedItems, и наоборот

Моя функция выглядит так:

const [selectedItems, setSelectedItems] = useState([]);

const handleSelectMultiple = index => {
    if (selectedItems.includes(index)) {
        setSelectedItems(selectedItems.filter(id => id !== index));
    } else {
        setSelectedItems(selectedItems => [...selectedItems, index]);
    }
    console.log("selectedItems", selectedItems, "index", index);
};

Вы можете найти console.log результат здесь

Пустой массив в результате, может кто-нибудь объяснить мне, где я что-то пропустил?

Answer 1

Поскольку useState является асинхронным - вы не увидите немедленного обновления после его вызова.

Попробуйте добавить useEffect, который использует массив зависимостей для проверки, когда значения были обновлены.

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

Answer 2

На самом деле нет проблем с вашим кодом. Просто, когда вы регистрируете selectedItems, состояние еще не обновляется.

Если вам нужно selectedItems точно после обновления состояния в вашей функции, вы можете сделать следующее:

const handleSelectMultiple = index => {
    let newSelectedItems;
    if (selectedItems.includes(index)) {
        newSelectedItems = selectedItems.filter(id => id !== index);
    } else {
        newSelectedItems = [...selectedItems, index];
    }
    setSelectedItems(newSelectedItems);
    console.log("selectedItems", newSelectedItems, "index", index);
};