使用 React Hooks 将延迟添加到地图中

Question

我已经尝试过使用状态与 Javascript 和 React 相关的解决方案，但我无法使用 Hooks 来做到这一点。我想为我渲染的每个元素添加3 秒的延迟array.map

import React, { useState } from 'react';

const DelayMapHooks = () => {
    
    const [array, setArray] = useState([1, 2, 3])
    return (
        <div>
            {
                array.map((elem, key) => {
                    // ADD DELAY HERE FOR EACH ELEMENT
                    return( <div>Number: {elem}</div> )
                })
            }
        </div>
    );
};

export default DelayMapHooks;

我尝试在地图后立即添加等待/异步，await delay(3000)与函数一起使用

const 延迟 = ms => {return(new Promise(res => setTimeout(res, ms)))}

但它不起作用，显示错误： Objects is not valid as a React child (found: [object Promise])。感谢任何帮助。

Answer 1

你不能像这样阻止渲染方法，渲染应该同步运行。不过，这可以通过 useEffect 来完成，您需要每个周期修改数组的状态。然后，React 将协调 DOM 并每秒渲染一个额外的元素。

useEffect(() => {
  const interval = setInterval(() => {
   // You'd want an exit condition here
  setArray(arr => [...arr, arr.length + 1]);
}, 1000);

  return () => clearInterval(interval);
}, []);