useState更新状态延迟问题

Question

使用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更新状态的延迟吗？如何解决呢？

Answer 1

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

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

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