使用 React Hooks 將延遲添加到地圖中

Question

我已經嘗試過使用 state 與 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;

我嘗試在地圖后立即添加一個 await/async，使用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);
}, []);

Answer 2

這對你有用嗎？ 延遲需要通過狀態處理。 隨着時間的推移添加項目或可見性屬性。

import React, { useEffect, useState } from "react";

const DelayMapHooks = () => {
  const [array, setArray] = useState([]);

  useEffect(() => {
    for (let i = 1; i <= 3; i++) {
      setTimeout(() => setArray((prevState) => [...prevState, i]), 3000 * i);
    }
  }, []);

  return (
    <div>
      {array.map((elem, key) => {
           return <div>Number: {elem}</div>;
      })}
    </div>
  );
};

export default DelayMapHooks;

Answer 3

你仍然可以使用延遲，但需要更多的工作

• 使用 IIFE 異步函數延遲迭代array
• 延遲后，設置要顯示的元素並有一個useEffect鈎子來監聽該更新，然后將要顯示的元素附加到一個新的數組中用於渲染

const [array] = React.useState([1, 2, 3, 4, 5])
const [displayArray, setDisplayArray] = React.useState([])
const [displayEl, setDisplayEl] = React.useState()

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

React.useEffect(() => {
  (async function () {
    for (let el of array) {
      await delay(1000)
      setDisplayEl(el)
    }
    setDisplayEl(undefined)
  })()
}, [array])

React.useEffect(() => {
  displayEl && setDisplayArray((prev) => [...prev, displayEl])
}, [displayEl])

return (
  <div className="App">
    <h1>Hello CodeSandbox</h1>
    {displayArray.map((elem, key) => (
      <div key={key}>Number: {elem}</div>
    ))}
  </div>
)

用於演示的 Codesandbox（從頭開始刷新）