useState更新状态延迟问题

使用React函数式组件做一个音频播放器（代码只有相关部分）

  const [playState, setPlayState] = useState(false);

在App组件中引用了useState管理音乐的播放状态（false为暂停，true为正常播放）

<allContext.Provider
    value={{ 
       playState,
       setPlayState,
    }}
>
    <Home />
</allContext.Provider>

使用createContext创建上下文并将播放状态playState存入到上下文中供子组件使用

const {
    setPlayList,
    setPlayState,
  } = useContext(allContext);

const getTracks = (id) => {
    setPlayState((playState) => !playState);
    const fetchData = async () => {
      const resultTracks = await axios.get(
        `${API_CONFIG}playlist/detail?id=${id.toString()}`
      );
      setPlayList(resultTracks.data.playlist.tracks);
    };
    fetchData();
  };

子组件SingleSheet中引入上下文中的playState，getTracks函数是Button按钮的点击事件，得到歌单列表，同时播放歌单中的第一首歌曲；于是修改playState的状态为true

const {
    playState,
    setPlayState,   
  } = useContext(allContext);

const onToggle = () => {
    if (ready) {
      setPlayState(!playState);
      if (playState) {
        myRef.current.play();
      } else {
        myRef.current.pause();
      }
    }
  };

然后，在子组件的上下文中引入playState状态；onToggle函数是控制播放/暂停按钮的点击事件，点击按钮playState的值确实修被改成了false，但是歌曲并没有暂停，再次点击playState的值被修改成true之后，反而暂停了。

请问这属于useState更新状态的延迟吗？如何解决呢？

您好，我是有问必答小助手，你的问题已经有小伙伴为您解答了问题，您看下是否解决了您的问题，可以追评进行沟通哦~

如果有您比较满意的答案 / 帮您提供解决思路的答案，可以点击【采纳】按钮，给回答的小伙伴一些鼓励哦～～

ps:问答VIP仅需29元，即可享受5次/月 有问必答服务，了解详情>>>https://vip.csdn.net/askvip?utm_source=1146287632

非常感谢您使用有问必答服务，为了后续更快速的帮您解决问题，现诚邀您参与有问必答体验反馈。您的建议将会运用到我们的产品优化中，希望能得到您的支持与协助！

速戳参与调研>>>https://t.csdnimg.cn/Kf0y

解决方案: 去掉useEffect中的空数组即可

const[zoom, setZoom] = useState(0);
useEffect(() = >{
    document.getElementById('workspace-content').addEventListener('mousewheel', scrollFunc);
    return () = >document.getElementById('workspace-content').removeEventListener("mousewheel", scrollFunc); // 记得解绑事件
});
function scrollFunc(e) {
    setZoom(zoom + 5)
}