React useState初始值为false 页面加载后状态异常变true排查

出现默认加载就展示图片的问题有两个核心原因：

• useEffect在React组件首次挂载完成后会默认执行一次，此时isPlaying的初始值为false，会直接走入else分支逻辑。
• 状态更新逻辑完全写反：
  • 播放状态（isPlaying === true）分支下，执行setLadyDancing(ladyDancing)没有做任何状态更新，没有将图片状态设为展示
  • 暂停状态（isPlaying === false）分支下，执行setLadyDancing(!ladyDancing)，把初始值为false的图片状态取反成了true，直接导致页面首次加载时图片就默认显示。

因为图片显示/隐藏和音频播放/暂停是完全同步的逻辑，优先推荐直接复用isPlaying状态控制图片显隐，减少冗余状态维护：

import {useEffect, useRef, useState} from "react";

import styled from "./Cat.module.scss";
import Swing from "../../assets/audio/GirlsLikeToSwing.mp3";

const dancingImg = ['https://i.gifer.com/P6XV.gif', 'https://i.gifer.com/DCy.gif']

const Cat = () => {
    const [isPlaying, setIsPlaying] = useState(false);
    const audioElement = useRef();

    const playPause = () => {
        setIsPlaying(prev => !prev);
    }

    useEffect(() => {
        isPlaying ? audioElement.current.play() : audioElement.current.pause();
    }, [isPlaying]);

    return (<div className={styled.headerContainer}>
            <div className={styled.lady}>
                {isPlaying && <img src={dancingImg[0]} alt="跳舞的女士" className={styled.ladyDancing}/>}
                {isPlaying && <img src={dancingImg[1]} alt="跳舞的猫" className={styled.catDancing}/>}
            </div>
            <button onClick={playPause}>{isPlaying ? '暂停' : '播放'}</button>
            <audio src={Swing} ref={audioElement}></audio>
        </div>
    )
};
      
export default Cat;

如果后续需要单独控制两张图片的显示逻辑、要保留两个独立状态，只要修正useEffect中的状态赋值逻辑即可，不要做无意义的取反：

useEffect(() => {
    if (isPlaying) {
        audioElement.current.play();
        setLadyDancing(true);
        setCatDancing(true);
    } else {
        audioElement.current.pause();
        setLadyDancing(false);
        setCatDancing(false);
    }
}, [isPlaying]);

问题效果参考：

内容的提问来源于stack exchange，提问作者Dominika Es