ReactJs UseState: вставить элемент в массив, который не обновляется

Я пытаюсь использовать 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 результат здесь

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


reactjs react-hooks use-state
person Mojackoo    schedule 06.03.2020    source источник
comment
На самом деле с вашим кодом проблем нет. Просто при входе selectedItems состояние еще не обновляется.   -  person Omar    schedule 06.03.2020
comment
setSelectedItems является асинхронным, он не обновляет состояние немедленно. Вы получаете устаревшее состояние.   -  person Gulam Hussain    schedule 06.03.2020
comment
@ hussain.codes, так что добавлены инструкции, чтобы иметь текущее состояние массива   -  person Mojackoo    schedule 06.03.2020

Ответы (2)


arrow_upward
3
arrow_downward

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

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

useEffect(() => {
    console.log(selectedItems);
}, [selectedItems])
person Harmenx    schedule 06.03.2020
comment
когда я пытаюсь использовать useEffect и я регистрирую (selectedItems), у меня есть последний индекс, добавленный в массив, а не список индексов, проблема в том, что конкатенация индексов делает это неправильно - person Mojackoo; 06.03.2020

arrow_upward
0
arrow_downward

На самом деле с вашим кодом проблем нет. Просто при входе 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);
};
person Omar    schedule 06.03.2020
comment
когда я делаю это изменение, указанное в моей функции, это результат после добавления 3 новых индексов, newSelectedItems [1] index 1 newSelectedItems [2] index 2 newSelectedItems [3] index 3 ожидаемый результат = ›newSelectedItems [1,2,3 ] указатель 3. похоже, что setSelectedItems () не работает, он не обновляет массив, он всегда сохраняет начальное состояние массива - person Mojackoo; 06.03.2020
comment
Можете ли вы опубликовать свой компонент целиком? Я только что протестировал, и он отлично работает. - person Omar; 06.03.2020