Состояние перехвата реакции не является последним, когда используется из нереагирующего обратного вызова

Question

Когда я пытаюсь достичь состояния во время обратного вызова веб-сокета, я не получаю его последнюю версию:

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;

}, []);

Любой способ принудительно получить последнее состояние, как при обновлении (используя вместо этого функцию прямого назначения)?

Answer 1

Когда изменяется значение useCallBack, возвращается новая функция с новой ссылкой, поэтому вам необходимо обновить функцию 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]);