无法更新物品清单？

Question

当我删除一行时，我的项目列表没有被更新，即使 console.log(data) 在删除该行后减少了一个项目，但是 console.log('list of items after: ', 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 分配一个新值。

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

这意味着控制台在组件重新渲染之前注销状态将返回旧状态。

Console.log(data) 会导致正确的状态，因为您只需过滤并返回一个新数组。

正如 dvfleet413 所述，您没有将 listOfItems 包含在 useEffect 的参数数组中，这意味着您的组件仅呈现一次。

Answer 3

状态的set* 方法是异步的，因此如果您在调用setListOfitems 后立即尝试访问listOfitems，您可能使用的是旧值而不是新更新的值。

您可以使用单独的useEffect 方法，该方法取决于在第一个方法中设置的值（使用第二个参数，如[listOfitems]）。这个其他方法应该在更新后被触发。

简而言之 - 数据正在更新，但您的 console.log 在更新完成之前显示旧值。

编辑：代码示例：

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