javascript - 使用 React Hooks 将延迟添加到 map 中

Question

我尝试过使用状态与 Javascript 和 React 相关的解决方案，但我无法使用 Hooks 来解决。我想为我在 array.map

上呈现的每个元素 添加 3 秒延迟

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;

我尝试在 map 之后立即添加一个 await/async，使用 await delay(3000) 和函数

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

但是不行，显示错误:对象作为 React 子项无效(找到:[object Promise])。感谢任何帮助。

Answer 1

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

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

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