为什么在useEffect中设置状态时不能访问状态

Question

当组件呈现我用socket发送套接字发出以获取useEffect中的数据时，我还会侦听以获取数据。当我从套接字获得数据时，我更新状态，然后调用一个函数。在功能内部，状态是空的。为什么州是空的？

const [chatData, setChatData] = useState([]);

const handleData = () => {
console.log(chatData)
}

useEffect(() => {
    socket.emit("chatData");

    socket.on("chatData", (data) => {
    setChatData(data)
    handleData();
    });

    return () => {
      socket.off("chatData");
    };
  }, []);

Answer 1

在这种情况下，React不能保证它会立即更新状态。但是，您可以将一个函数传递给setChatData，用于设置数据(在其中您可以调用函数)，而不是值。例如：

socket.on("chatData", (data) => {
    setChatData(() => {
        handleData(data);
        return data;
    };
});

或者，正如有人在评论中说的那样，您可以使用另一个带有chatData的chatData挂钩作为依赖项。