React：无法将对象添加到钩子中的现有数组

Question

我正在尝试添加一个根据 AXIOS 请求中返回的数据创建的对象，以在 React 应用程序中进行状态。

对象本身看起来很好，甚至按预期打印出来，没有错误，但是当我将它添加到挂钩时，无论我使用什么代码，都不会发生任何事情。我尝试了几种组合和方法，其中大多数可以在几年前的这篇旧文章中看到，它似乎描述了我正在尝试做的同一件事。到目前为止，我发现的几乎所有帖子或信息都建议做类似这样的事情，但没有任何效果。

我在下面附上了我的代码，显示了整个函数和有问题的钩子。

    const [queryResultData, setQueryResultData] = useState([])

    function queryResultDataHandler(resultData){
        for(let i=0; i < resultData.length; i++){
            const data=resultData[i];
            let book={
                title: data.title,
                publisher: data.publisher,
                copyright: data.publishedDate
            }
            setQueryResultData([...queryResultData,book]);
        }
    }

我还提供了一个屏幕截图，显示每个对象的内容以及每次尝试添加数据后的数据数组。

任何关于为什么会发生这种情况的意见都将不胜感激，因为我看不出我在这里做错了什么。

Answer 1

如果您想更新某些状态并且它取决于当前状态，您应该始终使用

setState((previousState) => newState)

函数。

就您而言，您需要更改：

setQueryResultData([...queryResultData,book]);

到

setQueryResultData((oldQueryResultData) => [...oldQueryResultData, book]);

您可以在

官方 React 文档中的 Parameters > nextState 下阅读有关 setState 钩子返回的 useState()

函数的特殊行为的信息