React Hook useCallback在调用时未获得更新状态

Question

我正在开发这个应用程序，双击页面并创建一个新项目。然后我通知websockets服务器将这个创建广播给所有其他收听它的用户。在另一个用户端，我必须添加这个新项目，这样每个人都可以同步。

我正在使用react hook，这是我第一个从头开始使用它的应用程序。我在这个应用程序中遇到了一些类似的问题，但我选择这个流程来说明基本问题。它必须涵盖大多数问题。

当我调用CCD_ 1以在"；其他用户"；则items状态为旧(空(。因此，无论我创建了多少次项目，页面上都只有一个，即我刚刚创建的项目。

这是一个代码示例：

import React, { useEffect, useState, useCallback } from 'react';
import io from 'socket.io-client';
let socket;
function App() {
const [items, setItems] = useState({});
const createItem = useCallback((data) => {
const id = generateId();
const newItem = { id, ...data };
const newItems = { ...items, [id]: newItem };
setItems(newItems)
// When I create a new item, I notify the server to broadcast it
socket.emit('itemCreated', newItem)
}, [items, setItems])
const doCreateItem = useCallback((item) => {
// When someone else creates an item, it should be invoked be invoked
const newItems = { ...items, [item.id]: item };
setItems(newItems)
}, [items]);
useEffect(() => {
// Connects to the server
socket = io('ws://localhost:8090', {
transports: ['websocket'],
path: '/ws'
});
// Listens to event
socket.on('createitem', (data) => {
doCreateItem(data)
});
// I cannot add doCreateItem here, otherwise it will call this effect everytime doCreateItem is executed
}, []);
return (
<div
onDoubleClick={
(e) => {
createItem({});
}
}
>
{
Object.values(items).map(item => {
return (
<div>{item.id}</div>
)
})
}
</div>
);
}
export default App;

doCreateItem具有项依赖关系。另一方面，useEffect依赖列表不包含doCreateItem，主要是因为每当我从服务器接收到新项目时，它都会重新调用useEffect回调。也因为我希望这种效果只执行一次(在组件安装时(。我尝试将useEffect一分为二，一个用于连接，另一个用于侦听器，但同样的情况也发生了。

事实上，我遇到过几个像这样的问题。回调的执行次数超出了预期，或者回调的状态没有更新。

有人能澄清一下我们应该如何解决这个问题吗？

提前感谢！

编辑

根据@Ross的建议，我更改了setItems调用以接收回调并返回新状态。这有助于setItems依赖性。但在useCallback1函数中，我仍然无法读取items。它总是空的。

我注意到的一件有趣的事情是，如果我停止使用useCallback并在每次渲染中重新创建函数，它就没有该函数的更新状态，但它确实有函数之外的状态：

function App() {
const [items, setItems] = useState({});

console.log('Rendered again and knows the state >', items)
const doCreatePostIt = (data) => {
console.log('Empty >', items)
// ...
};
// ...
}

Answer 1

当下一个状态依赖于当前状态时，使用useState的函数更新形式消除了依赖数组中的依赖项，并解决了"陈旧状态"；问题

• 从useState钩子返回的setX函数是稳定的，并且在渲染之间不会发生变化(请参见useStatedoc(；从依赖数组中省略是安全的

const [items, setItems] = useState({});
const createItem = useCallback((data) => {
const id = generateId();
const newItem = { id, ...data };
setItems((currItems) => ({
...currItems,
[id]: newItem,
}))
socket.emit('itemCreated', newItem)
}, [])
useEffect(() => {
function doCreateItem(item) {
setItems((currItems) => ({
...currItems,
[item.id]: item,
}))
}
socket = io('ws://localhost:8090', {
transports: ['websocket'],
path: '/ws'
});
socket.on('createitem', doCreateItem);
// Return a clean up function so the component will stop listening to the
// socket when the component is unmounted.
return () => {
socket.off('createItem', doCreateItem)
}
}, []);