我正在尝试使用 React Hooks 将 SVG 结构的颜色从红色更改为白色,然后将白色更改为红色。问题是几秒钟后颜色开始快速变化,而不是每秒变化一次。我不明白代码哪里出了问题。
这里是useState。
const[rectColor, rectColorSet] = useState('red')
以及用于更改颜色的 useEffect。
useEffect(() => {
if(rectColor === 'red'){
let timer = setInterval(() => {
rectColorSet('white')
}, 1000)
}
// console.log('timer',timer)
else if(rectColor ==='white'){
let timer = setInterval(() => {
rectColorSet('red')
}, 1000)
}
})
这是我使用包含颜色的状态的地方。
d={`
M-0.20 0 L-0.20 0.30 L0.20 0.30 L0.20 0 L-0.20 0
Z`}
fill={props.value ? "green" : rectColor}
/>
}
最佳答案
每个渲染设置一个新的间隔。使用 setTimeout
而不是 setInterval
,并且不要忘记清理效果:
useEffect(() => {
if (rectColor === 'red' || rectColor === 'white') {
const timeoutID = setTimeout(() => {
rectColorSet(rectColor === 'red' ? 'white' : 'red');
}, 1000);
return () => clearTimeout(timeoutID);
}
});
或者在 bool 值之间切换,而不是使用字符串表示状态。如果您添加其他可能更改的状态,则在组件安装时使用单个时间间隔可能更易于管理:
const [red, setRed] = useState(true);
useEffect(() => {
const intervalID = setInterval(() => {
setRed(red => !red);
}, 1000);
return () => clearInterval(intervalID);
}, []);
关于reactjs - 使用 React Hooks 每秒改变颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64619025/