REACT：LOAD页面状态为真后，尽管Usestate为false

Question

在应用程序中，通过单击按钮，我想做2件事：播放音频文件，显示2张图片。再次单击按钮后，我想关闭音频并隐藏2张图片。音频有效，但图片发疯了。为什么？我将USESTATE设置为默认情况下的“ false”，但是在加载页面后，它们是“ true”。我不明白为什么？

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

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

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

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

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

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

    return (<div className={styled.headerContainer}>
            <div className={styled.lady}>
                {ladyDancing ? <img src={dancingImg[0]} alt="" className={styled.ladyDancing}/> : null}
                {catDancing ? <img src={dancingImg[1]} alt="" className={styled.catDancing}/> : null}

            </div>

            <button onClick={playPause}>Play</button>
            

            <audio src={Swing} ref={audioElement}></audio>
        </div>

    )
};
      
export default Cat;

Answer 1

使用效果在第一个渲染和所有后续更新期间运行。

我相信您可能需要根据您想要的状态明确地执行setladydancing对True或false，否则它将继续根据其先前状态进行切换。

也许这可能有效：

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

Answer 2

只需使用iSplaying图像状态即可。

import { useEffect, useRef, useState } from 'react'

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

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

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

  const toggleAudio = () => {
    setIsPlaying((prevState) => !prevState)
  }

  return (
    <div className={styled.headerContainer}>
      <div className={styled.lady}>
        {isPlaying ? <img src={dancingImg[0]} alt="" className={styled.ladyDancing} /> : null}
        {isPlaying ? <img src={dancingImg[1]} alt="" className={styled.catDancing} /> : null}
      </div>

      <button onClick={toggleAudio}>Play</button>

      <audio src={Swing} ref={audioElement}></audio>
    </div>
  )
}

export default Cat

Answer 3

该页面加载时状态是正确的，因为在初始渲染上useeffect block被调用，然后将它们设置为！ladyDancing和！catDancing使它成为现实。

我建议对其使用单独的功能（并删除useffect）。

以及关于图片的内容：当Isplaying是正确时，您将它们设置为它们的值。为了解决这个问题，您需要将它们设置为true（播放时）或false（不播放时）。

代码：

const playPause = () => {
    setIsPlaying(!isPlaying);
    toggle(); // call the function
}

const toggle = () => { // the name of the function can be whatever you want
    if (isPlaying) {
        audioElement.current.play();
        setLadyDancing(true);
        setCatDancing(true);
    } else {
        audioElement.current.pause();
        setLadyDancing(false);
        setCatDancing(false);
    }
}