Не получается обновить список предметов?

Question

Мой список элементов не обновляется, когда я удаляю строку, даже если console.log (data) приводит к на один элемент меньше после удаления строки, но console.log ('список элементов после: ', listOfitems) дает мне все элементы полностью, даже если они удалены.

const [listOfitems, setListOfitems] = useState([]);

    useEffect(() => {
    getListOfitems();
}, [])

Пожалуйста, дайте мне знать, что здесь может быть не так:

                            editable={{

                                onRowDelete: (oldData) =>
                                    new Promise((resolve, reject) => {

                                        setTimeout(() => {
                                            {
                                                console.log('list of items before: ', listOfitems)
                                                console.log('oldData.item_key;: ', oldData.item_key)
                                                const indexToDelete = oldData.item_key;
                                                console.log(indexToDelete)
                                                const data =
                                                    listOfitems.filter(
                                                        (item) => ((item.item_key !== oldData.item_key))
                                                    )
                                                setListOfitems(data);

                                                console.log(data)
                                                console.log(setListOfitems(data))
                                                deleteitem(oldData);
                                                setListOfitems(data);
                                                console.log('list of items after: ', listOfitems)
                                            }
                                            resolve();
                                        }, 1000);
                                    }),
                            }}

Answer 1

Второй аргумент ловушки useEffect - это массив значений, от которых зависит ловушка. В вашем примере вы передали пустой массив, который отлично подходит для работы ловушки как ComponentDidMount(). Однако, поскольку ваш хук теперь зависит от значений no , он больше никогда не сработает. В приведенном ниже примере передача listOfItems в этот массив приведет к срабатыванию ловушки всякий раз, когда эта часть состояния изменяется. Я не вижу остальной части вашего кода, но, исходя из вашего описания проблемы, это мое лучшее предположение относительно решения для вас.

Надеюсь, это поможет.

const [listOfitems, setListOfitems] = useState([]);

useEffect(() => {
    console.log('useEffect')
    getListOfitems().then((listOfitems) => {
        setListOfitems(listOfitems);
    });
    getDocuments();
}, [listOfItems]);

Answer 2

Каждый раз, когда компонент визуализируется, ловушке useState назначается новое состояние const. В вашем случае каждый раз, когда ваш компонент повторно визуализируется, эта строка запускает присвоение нового значения listOfitems.

Console.log (data) приводит к правильному состоянию, потому что вы просто фильтруете и возвращаете новый массив.

Как указано в dvfleet413 , вы не включаете listOfItems в массив аргументов useEffect означает, что ваш компонент отрисовывается только один раз.

Answer 3

Методы set* для состояния являются асинхронными, поэтому, если вы попытаетесь получить доступ к listOfitems сразу после вызова setListOfitems, вы можете использовать старое значение, а не новое обновленное.

Вы может использовать отдельный метод useEffect, который зависит от значения, установленного в первом (используйте второй параметр, например [listOfitems]). Этот другой метод должен срабатывать после обновления.

Короче говоря, данные обновляются, но ваш console.log отображает старое значение до завершения обновления.

edit: Пример кода:

useEffect(()=>{
    getListOfitems()
    // console.log here may NOT show the new listOfitems value because
    // setListOfitems is asynchronous, and getListOfitems may also be
}, []) // only loads on the initial mount

Я предполагаю, что getListOfitems сначала будет извлекать данные из внешнего источника и вызывать setListOfitems внутри него. Код в сообщении не показывает, что происходит.

Секунда useEffect может выглядеть так:

useEffect(()=>{
    // do something with listOfitems
}, [listOfitems]) // gets called every time listOfitems is updated