当从非反应回调中使用时，反应钩子状态不是最新的答案

【问题标题】：React hooks state is not the latest when is used from a non-react callback当从非反应回调中使用时，反应钩子状态不是最新的
【发布时间】：2020-03-08 15:23:59
【问题描述】：

当我尝试在 websocket 回调期间达到状态时，我没有收到它的最新版本：

import update from 'immutability-helper';
import React, {useCallback, useEffect, useState} from 'react';

const [pendingResponse, setPendingResponse] = useState([]);

const addPendingResponse = (sequence, callback) => {
    setPendingResponse(prevPendingResponse => {
        return update(prevPendingResponse, {$push:[{sequence: callback}]});
    });
};


const wsOnMessage = useCallback((event) => {
    const message = event.data;
    if (message.payload.response_to in pendingResponse) {
        // NOT GETTING THE LATEST pendingRespone STATE !
        pendingResponse[message.payload.response_to]();
    }
}, [pendingResponse]);

useEffect(() => {
    console.log('useEffect');
    console.log('setting web socket...');
    const ws = new WebSocket('ws://127.0.0.1:8000/chat');

    ws.onmessage = wsOnMessage;

}, []);

有什么方法可以像更新时那样强制获取最新状态（使用函数而不是直接赋值）？

【问题讨论】：

标签： reactjs state react-hooks

【解决方案1】：

当 useCallBack 的 deps 发生变化时，新函数返回新的引用，所以你必须用新的更新 onmessage 函数。

试试下面的代码：

import update from 'immutability-helper';
import React, { useCallback, useEffect, useState, useRef } from 'react';

const [pendingResponse, setPendingResponse] = useState([]);
const webSocket = useRef(new WebSocket('ws://127.0.0.1:8000/chat'));

const addPendingResponse = (sequence, callback) => {
  setPendingResponse(prevPendingResponse => {
    return update(prevPendingResponse, { $push: [{ sequence: callback }] });
  });
};


const wsOnMessage = useCallback((event) => {
  const message = event.data;
  if (message.payload.response_to in pendingResponse) {
    // NOT GETTING THE LATEST pendingRespone STATE !
    pendingResponse[message.payload.response_to]();
  }
}, [pendingResponse]);

useEffect(() => {
  if (webSocket && webSocket.current) {
    webSocket.current.onmessage = wsOnMessage;
  }
}, [wsOnMessage]);

【讨论】：