如何在 React 的 while 循环中更新状态

Posted

技术标签:

【中文标题】如何在 React 的 while 循环中更新状态【英文标题】:How do I update State inside of a while loop in React 【发布时间】:2021-03-17 08:21:15 【问题描述】:

假设我有这个代码。

var s = [1,2,3,4,5,6,7,8,9,0];
const[arr,setArr]=useState(s);
while(arr.length != 0)
    setArr(arr.splice(0,1));
    console.log(arr); //This returns [2,3,4,5,6,7,8,9,0] and [3,4,5,6,7,8,9,0] and so on until []

我在函数组件的末尾返回 arr.length。但是,它首先渲染 10,然后等到整个 while 循环运行后再渲染 1。中间的所有数字都被简单地跳过了。

我有点理解为什么会发生这种情况,但是无论如何我可以展示所有的长度吗?我有一个睡眠功能,它需要几毫秒并在这段时间内暂停程序,如果它有任何用处,以确保用户可以在合理的时间内看到渲染的长度。

提前致谢!

【问题讨论】:

const[arr,setArr]=setState(s); 看起来很奇怪。你的意思是useState 而不是setState 【参考方案1】:

假设这是一个功能组件(我猜你的意思是useState,而不是setState,在const[arr,setArr]=setState(s);),你需要让组件在设置下一个状态之前呈现每个状态。否则,所有状态更新都会被批处理在一起,并且组件只有在它们全部完成后才会再次渲染。

例如:

function Example() 
    const [arr, setArr] = useState([1,2,3,4,5,6,7,8,9,0]);
    // Set up a timer on mount, remove it on dismount and when
    // we run out of values to show
    useEffect(() => 
        const handle = setInterval(() => 
            // Note useing the callback function, so `arr` isn't stale
            // in this callback
            setArr(a => 
                if (a.length) 
                    // Update the array, dropping the first entry
                    return a.slice(1);
                
                // No more entries, stop the timer
                clearInterval(handle);
                return a;
            );
        , 500);
        return () => clearInterval(handle);
    , []);
    return <div>arr.join()</div>;

【讨论】:

这行得通!太感谢了!我从来没有完全理解 setInterval 但它肯定会派上用场!您实际上还在同一个答案中回答了我的另一个问题! ***.com/questions/65123840/….【参考方案2】:

我觉得你可以用useEffect钩子

每次,我们改变arr,钩子都会被调用并有一些超时

const SHOW_TIMEOUT = 300;
var s = [1,2,3,4,5,6,7,8,9,0];

const [arr, setArr] = useState(s);

useEffect(() => 
  const timeoutId = setTimeout(() => setArr(arr.slice(1)), SHOW_TIMEOUT);

  return () => clearTimeout(timeoutId); // also need to stop timeout in case of unmount
, [arr]);

【讨论】:

对不起。不工作。我认为问题是 useEffect 没有在 while 循环运行并且 arr 正在改变时强制更新

以上是关于如何在 React 的 while 循环中更新状态的主要内容,如果未能解决你的问题,请参考以下文章

无法在 React 中使用扩展运算符更新状态

如何在 while 循环内更新 api 调用?

如何使用 while 循环更新行?

react的最大更新深度是多少?

React 子组件在父组件中更新状态后如何将其重置回原始状态

如何在 React 中更新 chart.js 的状态