如何在 React 的 while 循环内更新 State

Question

说我有这个代码。

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。中间的所有数字都被简单地跳过。

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

提前致谢！

Answer 1

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

例如：

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>;
}

Answer 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]);