React功能组件在按照setInterval更改编号状态时不一致

Question

Rando2.js

import React, { useState } from 'react';
const Rando2 = (props) => {
const [num, setNum] = useState(0);
const changeNum = () => {
setInterval(()=>{
let newNum = Math.floor(Math.random()*props.maxNum);
setNum(newNum);
}, 1000)
}
changeNum();
return (
<h1>{num}</h1>
)
}
export default Rando2;

在上面的代码中，没有错误，props｛maxNum:15｝是由parent提供的，所以这很好。问题是，我希望数字每秒更改一次，一开始确实如此，但随着时间的推移，数字更改的频率急剧增加，比如每秒10次，然后是20次或30次。。。关于这个。

现在，代码中有什么问题吗，为什么数字的变化总是不一致。。。就像每秒一次，按照代码？

Answer 1

问题是因为每次num状态更改时，都会设置一个新的超时或间隔。因此，每次运行或重新调用此组件时，都会有一个额外的间隔，即将新的num与原始间隔一起设置为不同的节奏。相反，您只需要在组件第一次加载时设置超时。

useEffect(() => {
val interval = setInterval(...code...)
return () => {clearInterval(interval)}
}, [])

Answer 2

在上面的代码中，在每次渲染后都会安排一个新的setInterval，有时会同时执行多个间隔

使用Effect Hook在初始渲染时安排setInterval，以便它在每秒钟后执行一次间隔

useEffect(()=>{
setInterval(()=>{
let newNum = Math.floor(Math.random()*props.maxNum);
setNum(newNum);
}, 1000)
return () => {clearInterval(interval)}
},[])