React中如何实现数字从0到指定值自动递增，现有代码运行异常如何修复？

你遇到的异常是React Hooks的闭包陷阱导致的：

• 你给useEffect传入了空依赖数组，所以这个副作用函数只会在组件首次挂载时执行1次
• 定时器回调函数捕获了首次渲染时的number变量，值永远是初始的0，所以每次执行setNumber(number+1)实际都是把值设为1，后续的state更新无法被旧的回调获取，才会出现数值乱跳的问题
• 另外你没有写useEffect的清理函数，组件卸载时定时器还会继续运行，会引发内存泄漏

最推荐的做法是使用setState的函数式更新形式，不需要依赖外部的state变量，就能拿到最新的状态值，修改后的代码如下：

const [number, setNumber] = useState(0);
const limiter = 50;

React.useEffect(() => {
    const incrementer = setInterval(() => {
        setNumber(prevNumber => {
            // 函数式更新的入参是最新的state值
            if (prevNumber === limiter) {
                clearInterval(incrementer);
                return prevNumber;
            }
            return prevNumber + 1;
        })
    }, 500);
    // 新增清理逻辑，组件卸载时自动清除定时器
    return () => clearInterval(incrementer);
}, [limiter]); // 将limiter加入依赖数组，符合Hooks的依赖检查规则

如果需要调整递增速度，直接修改setInterval的第二个参数（单位为毫秒）即可，数值越小递增越快。

内容的提问来源于stack exchange，提问作者mne_web_dev