Javascript 无法更新项目列表？

当我删除一行时，即使console.log（数据）在删除该行后会减少一个项目，但我的项目列表不会更新，但是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);
                                    }),
                            }}

---

useEffect钩子中的第二个参数是钩子依赖的值数组。在您的示例中，您传递了一个空数组，这非常适合使钩子像

ComponentDidMount（）

那样工作。然而，由于钩子现在不依赖于任何值，它将永远不会再次触发。在下面的示例中，将

listOfItems

传递到该数组将导致钩子在该段状态发生更改时触发。没有看到代码的其余部分，但根据您对问题的描述，这是我对您的解决方案的最佳猜测

希望这有帮助

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

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

---

state的

set*

方法是异步的，因此如果在调用

setListOfitems

后立即尝试访问

listOfitems

，则可能使用的是旧值，而不是新更新的值

您可以使用独立的

useffect

方法，该方法取决于第一个方法中设置的值（使用第二个参数，如

[listOfitems]

）。此其他方法应在更新后触发

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

编辑：代码示例：

useffect（（）=>{
getListOfitems（）
//此处的console.log可能不会显示新的ListoItems值，因为
//SetListoItems是异步的，GetListoItems也可以是异步的
}，[]）//仅在初始装载时加载

我假设

getListOfitems

最初将从外部源检索数据，并在其中调用

setListOfitems

。文章中的代码没有显示发生了什么

第二个

useffect

可能看起来像：

useffect（（）=>{
//对列表项做些什么
}，[ListoItems]）//在每次更新ListoItems时调用

每次呈现组件时，都会将一个新的常量状态分配给useState钩子。在您的情况下，每次重设组件时，这一行都会运行，为ListoItems指定一个新值

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

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

log（数据）会导致正确的状态，因为您只需过滤并返回一个新数组

---

正如dvfleet413所述，您在useEffect的参数数组中不包含ListoItems，这意味着您的组件只渲染一次。

如果您只想跟踪状态的更改，请使用如下钩子：useEffect（（）=>console.log（您需要的状态））否出于某种原因，我的SetListoItems没有运行但是，这可能会导致一些循环问题，因为您也在钩子中调用

setListOfItems（）

。您可能需要进行一些重构，但让数据以您所描述的方式重新渲染的关键在于正确使用第二个参数。不，它不会传递空数组，因为GetListoItems是一个连接到服务器的函数，从那里加载此列表。异步函数GetListoItems（）{const res=await fetch（“http://”+host+“：5000/itemlist”）；console.log（'getListOfitems'）const value=wait res.json（）；setListOfitems（value）；}我试图将我的useEffect更改为useEffect（（）=>{console.log（'useEffect'）getListOfitems（）；}，[]），您能写第二个useEffect代码吗？我想我不明白你的意思。@SS因为你的代码示例没有显示

getListOfitems

正在做什么-很难知道什么时候应该调用它。这是在拉取最新的列表（例如，它只是

返回listOfitems

？还是实际上调用另一个函数从外部源检索它？）