состояние реакции не обновляется внутри callabck - PullRequest
Новая
       9

состояние реакции не обновляется внутри callabck

1 голос
/ 04 августа 2020

Я не понимаю, почему следующий код, обратный вызов onSocketMessage не использует новое состояние сбора данных. внутри useEffect состояние обновляется правильно, но функция не оценивается снова ... Я также пробовал использовать useCallback с получением в качестве зависимости, но ничего не изменилось. 

const Ac = () => {
  const [acquisition, setAcquisition] = useState({ data: {} })
  const [loading, setLoading] = useState(true)
  const socket = useRef(null);


  const onSocketMessage = (message) => {
    console.log(acquisition) // this is always initial state
    let { data } = acquisition
    data.input[message.index] = message.input
 
    setAcquisition(prevState => ({ ...prevState, data }));
  }

   


  useEffect(() => {
    fetchCurrentAcquisition(acquisition => {
      setAcquisition(acquisition)
      setLoading(false)
      socket.current = newSocket('/acquisition', () => console.log('connected'), onSocketMessage);
    })


    return () => socket.current.disconnect()
  }, [])


  console.log(acquisition)

1 Ответ

1 голос
/ 04 августа 2020

Вы регистрируете устаревшее закрытие , вам следует попробовать следующее: 

const onSocketMessage = useCallback((message) => {
  setAcquisition((acquisition) => {
    //use acquisition in the callback
    console.log(acquisition);
    //you were mutating state here before
    return {
      ...acquisition,
      data: {
        ...acquisition.data,
        input: {
          //not sure if this is an array or not
          //assimung it is an object
          ...acquisition.data.input,
          [message.index]: message.input,
        },
      },
    };
  });
}, []); //only created on mount

useEffect(() => {
  fetchCurrentAcquisition((acquisition) => {
    setAcquisition(acquisition);
    setLoading(false);
    socket.current = newSocket(
      '/acquisition',
      () => console.log('connected'),
      onSocketMessage
    );
  });

  return () => socket.current.disconnect();
  //onSocketMessage is a dependency of the effect
}, [onSocketMessage]);
...