在callabck内部未更新react状态

Question

我不明白为什么下面的代码，回调onSocketMessage没有使用新的获取状态。在useEffect内部，状态被正确更新，但函数不会再次求值……我还尝试将useCallback与acquisition作为依赖项一起使用，但没有任何变化。

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)

Answer 1

您正在登录stale closure，您应该尝试执行以下操作：

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]);