Javascript 与套接字io组合时，React Hook（usestate）不工作

我快疯了。我真的不明白为什么下面的方法不起作用。我从react开始。 我正在尝试从服务器获取数据，并在渲染之前加载我的状态。 套接字“fromAPI”正常，这只是一个计时器。 套接字“lobbyUpdate”不工作，我正在从数据库中获取数据

import React，{useState，useffect}来自“React”；
从“socket.io客户端”导入socketIOClient；
常量端点=”http://localhost:2500";
功能厅（）{
const[response，setResponse]=useState（“”）
const[updates，setUpdates]=useState（[]）
useffect（（）=>{
const socket=socketIOClient（端点）；
socket.on（“FromAPI”，data=>{
setResponse（数据）；
});
socket.on（'lobbyUpdate'，data=>{
console.log（更新）//无
设置日期（数据）
console.log（datas）//显示数据
console.log（更新）//不显示任何内容
})
//清理影响
return（）=>socket.disconnect（）；
//
}，[]）；

您的代码运行良好，您只需将日志语句放在无用的地方

updates

是一个本地常量。它永远不会更改，这不是

setUpdates

试图执行的操作。useffect中的console.log语句将只引用第一次渲染时

response

和

updates

的值

调用

setUpdates

时，您要求react重新渲染组件。在该新渲染上，将创建一个新的本地常量，它将获得新值。新渲染中的代码可以使用此值，但上一个渲染中的代码不能。如果要验证它是否使用新值重新渲染，请将日志状态设置为将ent插入部件主体：

function Lobby() {

    const [response, setResponse] = useState("")
    const [updates, setUpdates] = useState([])

    console.log("rendering with: ", response, updates);

    useEffect(() => {
        const socket = socketIOClient(ENDPOINT);

        socket.on("FromAPI", data => {
          setResponse(data);
        });

        socket.on('lobbyUpdate', datas => {
           setUpdates(datas)
        })
       
        // CLEAN UP THE EFFECT
        return () => socket.disconnect();
    }, []);

---

useffect

中的

更新

引用的是来自初始渲染的值，而不是当前渲染的值。若要修复此问题，请使用refs而不是（或添加到）状态，或者在每次更新更改时运行

useffect

：

function Lobby() {
    const [response, setResponse] = useState("")
    const [updates, setUpdates] = useState([])
    const socketRef = useRef();
    // Create the socket
    // and add the API listener:
    useEffect(() => {
        socketRef.current = socketIOClient(ENDPOINT);
        socketRef.current.on("FromAPI", setResponse);
        return () => socketRef.current.disconnect();
    }, []);

    useEffect(() => {
        const handleLobbyUpdate =  (datas) => {
            console.log(updates); // this will now display the current data
            setUpdates(datas);
        };
        socketRef.current.on('lobbyUpdate', handleLobbyUpdate);
        return () => {
            socketRef.current.off('lobbyUpdate', handleLobbyUpdate);
        }
    }, [updates]);

---

请记住，状态设置器是异步的，因此在调用

setUpdates

后，您不会立即看到

updates

变量中的更改-您必须等到下一次渲染时才能填充

更新。
此解决方案工作正常。console.log（updates）正在刷新并且状态已加载。我现在可以在渲染中使用我的更新。非常感谢。