useState 在尝试使用 setTimeout 进行更新时执行操作

Question

我正在尝试使用 setTimeout 每 6 秒在真和假之间切换一个 useState。我使用此状态从div 中添加/删除类 - 这将导致div 在top: 0到top: 100%之间切换(并且transition负责动画(。

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

我已经用onClick测试了它，它完全按照我的预期工作。但是，使用 setTimeout 逻辑：

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

当然，它不可能是真的和假的，它应该是颠倒它的价值。有人可以告诉我为什么它不起作用，也许告诉我为什么它以这种奇怪的方式行事？

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

你可以做这样的事情。 使用效果将空数组作为 deps，所以它只会一次，你不需要初始化状态。

在 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;