Javascript 在js中使用一些元素渲染数组元素

我在React JS中有一个包含字符串数据的数组，我想循环该数组，并以一定的延迟渲染数组的每个元素。 我尝试过setTimeout和setInterval，但这些都不适合我

相反，我所做的是将该数组转换为另一个数组，并将其放入setTimeout，这样可能需要一些时间，但对我来说不起作用

这是密码

const [index, setIndex] = useState(0);
const [shiftArr, setShiftArr] = useState([]);
const fruitsArray = [
    "Apple",
    "Banana",
    "Mango",
    "Grapes",
    "Peach",
    "Avocado",
    "watermelon",
    "Pineapple",
    "Orange",
    "Strawbries",
  ];

useEffect(() => {
      
    for (let i = 0; i < fruitsArray.length; i++) {
      setTimeout(() => {
        setShiftArr((shiftArr) => [...shiftArr, fruitsArray[i]]);
        setIndex(i + 1);
      }, 2000);
    }
  }, []);

const[index，setIndex]=useState（0）；
常量[shiftar，setShiftArr]=useState（[]）；
常量水果数组=[
“苹果”，
“香蕉”，
“芒果”，
“葡萄”，
“桃子”，
“鳄梨”，
“西瓜”，
“菠萝”，
“橙色”，
“草莓糖”，
];
useffect（（）=>{
for（设i=0；i{
设置移位器（（移位器）=>[…移位器，结果数组[i]]；
setIndex（i+1）；
}, 2000);
}
}, []);

移位数组的渲染

<div className="fruitList">
          {shiftArr.map((fruit, ind) => (
            <div style={{ marginLeft: "20px" }} key={ind}>
              {fruit}
            </div>
          ))}
        </div>

{shiftArr.map（（水果，印度）=>(
{水果}
))}

当您设置状态时，组件将重新招标，并且如果依赖项发生更改，将再次调用

useffect

使用

shiftArr

作为

useffect

的依赖项，如果其长度与原始数组不同，则设置超时，并通过将其切片以包括下一项，从原始数组创建

shiftArray

：

const{useState，useffect}=React；
常量Demo=（{array}）=>{
常量[shiftar，setShiftArr]=useState（[]）；
//当数组更改时初始化移位器
useffect（（）=>setShiftArr（array.slice（0,1）），[array]）；
useffect（（）=>{
if（shiftArr.length==array.length）返回；
常量超时=设置超时（（）=>
设置移位数组（数组切片（0，移位数组长度+1））
, 2000);
return（）=>clearTimeout（超时）；
}，[shiftar]）；
返回(
{shiftArr.map（（水果，印度）=>(
{水果}
))}
);
};
康斯特水果=[“苹果”、“香蕉”、“芒果”、“葡萄”、“桃子”、“鳄梨”、“西瓜”、“菠萝”、“橙子”、“草莓糖”]；
ReactDOM.render(
,
根
);

这是否回答了您的问题？是的，任何解决方案都有效吗？