状态不立即反映更新

Question

我希望这不会被标记为重复，因为没有一个相同的问题完全反映我的问题。 所以我遇到的问题是我有一个这样的 useEffect 钩子：

useEffect(()=>{
        
         console.log("opening websocket");
         websocket.current=new WebSocket(`ws://127.0.0.1:8000/chat/${curMessage.receiverUsername}/${curUserName}/`);
         websocket.current.onopen= (event)=>{
             console.log("open:",event)
         }
         websocket.current.onclose= (event)=>{
            setSentMessages([]);
            console.log("close:",event,sentMessages);
        }


        websocket.current.onmessage=(event)=>{
            console.log("new message",event);
            console.log(JSON.parse(event.data));
            setSentMessages([...sentMessages,JSON.parse(event.data)]);
            setCont([...cont,1,2]);
            console.log(sentMessages);
            

        }
        
        
        
       setSentMessages([]);
        
    },[curMessage,curUserName]);

变量curMessage从 redux 状态获取它的值，并且由于它位于 useEffect 的依赖数组中，因此更改应立即反映在 redux 状态中进行，除了最后一行的setSentMessages([])之外，它可以正常工作useEffect，状态sentMessages永远不会立即更新 useEffect 被触发，这导致仍然获得旧值而不是空数组，其他一切正常，并且在 useEffect 被触发时更新，我尝试放置setSentMessages([])在另一个依赖于另一个状态但结果相同的 useEffect 中。

Answer 1

const [sentMessages, setSentMessages] = useState([
    // some initial state here
]);

const sentMessagesRef = useRef([
    // some initial state here
]);

useEffect(() => {
  // Keep ref in sync with state    
  sentMessagesRef.current = sentMessages;
}, [sentMessages]);

useEffect(
  () => {
    websocket.current.onmessage = (event) => {
      // Use up-to-date value of sentMessages here,
      // not the value at the time of declaring this function.
      setSentMessages([...sentMessagesRef.current, JSON.parse(event.data)]);
    }
    
    setSentMessages([]);
  },
  [curMessage, curUserName]
);

我相信您的问题是setSentMessages([])实际上正在工作，但是onmessage函数随后会用过时的值覆盖该状态。 状态会立即更新，但您的回调使用sentMessages的过时引用。 将状态复制到 ref 然后访问它来修复它。