reactjs - 使用 React Hooks 每秒改变颜色

Question

我正在尝试使用 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}
        />
   }

Answer 1

每个渲染设置一个新的间隔。使用 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);
}, []);