时间戳

首页 > 解决方案 > setInterval 无法在反应中访问变量

reactjs - setInterval 无法在反应中访问变量

问题描述

一个简单的反应脚本：

import React, { useState, useEffect } from 'react';
export default function App() {
    const [indexesArray, setIndexesArray] = useState([]);

    const doit = () => {
        const arr = [];
        for(let i = 0;i<10;i++){
            arr.push(i);
        }
        setIndexesArray(arr);
    }

    useEffect(() => {
        if(!indexesArray.length){
            doit();
            setInterval(function(){
                console.log('indexesArray',indexesArray);
            }, 2000);
        }
        
    }, [indexesArray]);

    return (
      <>
        {indexesArray && JSON.stringify(indexesArray)}
      </>
  );
}

在页面上我可以看到数组的内容。但是，每 2 秒在控制台中打印一次数组会显示一个空数组。我错过了什么？

标签： reactjs

解决方案

所使用的indexesArray绑定是setInterval存在于创建区间的范围内的数组——它是空的。组件的重新渲染不会改变现有状态 - 它会app在完全不同的范围内再次运行整体（但这次返回的新值由useState）。

在您的效果挂钩中，仅当数组已被填充时才设置间隔（并且不要忘记之后清除间隔）。

function App() {
    const [indexesArray, setIndexesArray] = React.useState([]);

    const doit = () => {
        const arr = [];
        for(let i = 0;i<10;i++){
            arr.push(i);
        }
        setIndexesArray(arr);
    }

    React.useEffect(() => {
        if(!indexesArray.length){
            doit();
        } else {
            const intervalId = setInterval(function(){
                console.log('indexesArray',indexesArray);
            }, 2000);
            return () => clearInterval(intervalId);
        }
        
    }, [indexesArray]);

    return indexesArray && JSON.stringify(indexesArray)
}

ReactDOM.render(<App />, document.querySelector('.react'));
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div class='react'></div>

推荐阅读