尝试使用 setTimeout 更新时 useState

Question

我正在尝试使用 setTimeout 每 6 秒在 true 和 false 之间翻转一个 useState。我使用此状态从 div 中添加/删除类 - 这将导致 div 在 top: 0 和 top: 100% 之间切换（transition 负责动画）。

更具体地说，我有一个 iPhone 包装图像，其中包含一个内容图像。这个想法是它会慢慢滚动到内容图像的底部，然后在 6 秒后（从它开始向下滚动的时间开始），它会开始向上滚动，无限循环。但是，它根本无法正常工作。

我已经使用 onClick 对其进行了测试，它完全符合我的预期。但是，使用 setTimeout 逻辑：

• 状态总是 false - 即使我们将其设置为 true 然后记录它
• 从 JSX 的角度来看，状态始终为 true - 始终添加类，这意味着状态为 true

当然不能真假，应该是翻转它的值。有人可以告诉我为什么它不起作用，或者告诉我为什么它会以这种奇怪的方式运行吗？

import React, { useState } from 'react';
import iphone from '../Images/iphone.png'

const Iphone = (props) => {
    const [isInitialised, setInitialised] = useState(false)
    const [animating, setAnimating] = useState(false)

    const startAnimation = () => {
        setAnimating(!animating); /* Even if I use `true`, it will log to the console as `false` */
        console.warn('animation change iphone!');
        console.warn(animating);
        console.warn(isInitialised); /* This also always logs as `false` */

        setTimeout(() => {
            startAnimation();
        }, 6000);
    }

    if (!isInitialised) {
        setInitialised(true);
        startAnimation();
    }

    return (
        <div className={`iphone align-mobile-center ${animating ? "iphone--animating" : ""}`} onClick={() => setAnimating(!animating)}>
            <img className="iphone__image" src={iphone} alt="An iPhone" />
            <div className="iphone__content">
                <img className="iphone__content-image" src={props.image} alt={props.alt} />
            </div>
        </div>
    )
}

export default Iphone;

我使用isInitialised，否则它似乎会陷入无限循环。

Answer 1

你可以做这样的事情。 useEffect 与空数组作为 deps 所以它只会一次，你不需要 isInitialized 状态。

在 useEffect 中使用 setInterval，因此它将每 6 秒运行一次。

使用回调的方式设置状态，这样你总能得到正确的动画值。

import React, { useState } from 'react';
import iphone from '../Images/iphone.png'

const Iphone = (props) => {
    const [animating, setAnimating] = useState(false)

    useEffect(() => {
      const startAnimation = () => {
        setAnimating(v => !v);
      }
      const interval = setInterval(() => {
        startAnimation();
      }, 6000);
      return () => clearInterval(interval);
    }, []);

    return (
        <div className={`iphone align-mobile-center ${animating ? "iphone--animating" : ""}`} onClick={() => setAnimating(!animating)}>
            <img className="iphone__image" src={iphone} alt="An iPhone" />
            <div className="iphone__content">
                <img className="iphone__content-image" src={props.image} alt={props.alt} />
            </div>
        </div>
    )
}

export default Iphone;

Answer 2

您可以使用 useEffect 并将 setTimeout 带到外面。

import React, { useState } from 'react';
import iphone from '../Images/iphone.png'

const Iphone = (props) => {
    const [isInitialised, setInitialised] = useState(false)
    const [animating, setAnimating] = useState(false)
    useEffect(()=>{
       startAnimation();
    },[]);
    const startAnimation = () => {
        setAnimating(!animating); 
        console.warn('animation change iphone!');
        console.warn(animating);
        console.warn(isInitialised);
    }

    setTimeout(() => {
      if (!isInitialised) {
        setInitialised(true);
        startAnimation();
      }
    }, 6000);



    return (
        <div className={`iphone align-mobile-center ${animating ? "iphone--animating" : ""}`} onClick={() => setAnimating(!animating)}>
            <img className="iphone__image" src={iphone} alt="An iPhone" />
            <div className="iphone__content">
                <img className="iphone__content-image" src={props.image} alt={props.alt} />
            </div>
        </div>
    )
}

export default Iphone;