Question

我不明白为什么下面的代码onCallMessage回调不使用新的获取状态。在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)

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

反应状态未在Callabck内部更新

1 个答案: