循环遍历数组并一次显示单个项目，动态持续时间，如 react js 中的 setTimeout 或 SetInterval

Posted 2023-02-22

【中文标题】循环遍历数组并一次显示单个项目，动态持续时间，如 react js 中的 setTimeout 或 SetInterval

【英文标题】：loop through an array and show single item at a time with dynamic time duration like setTimeout or SetInterval in react js

【发布时间】：2021-04-26 15:03:07

【问题描述】：

我有一个 Media.json 文件，其中包含 6 个媒体对象（名称、持续时间、文件类型）。我想遍历它们，并希望根据媒体对象持续时间属性一次显示一个具有动态持续时间的项目。我已经尝试使用 setTimeout 和 SetInterval 在它们内外循环，但仍然无法做到这一点。我正在使用带有功能组件的 react js。帮助将不胜感激。我的示例代码。

const [mediaItem, setMediaItem] = useState()
const items = [ name: 'one' ,  name: 'two' ,  name: 'three' ];
const renderMedia = () => 
for (let i = 0; i < items.length; i++) 
  setTimeout(() => 
    setMediaItem(items[i]);
    console.log(mediaItem);
  , 5000);

// return items[currentIndex].name;

;

谢谢

【问题讨论】：

您好，欢迎来到***。请尝试包含您尝试执行此操作的Minimal, Complete, and Reproducible 代码示例。如果有错误，包括它们。如果有错误，请尽可能解释并提供您已经调试过的内容并包括重现细节。如果它不起作用，请解释实际结果与预期结果。祝你好运。

【参考方案1】：

问题

for 循环是完全同步的代码。在循环中更新反应状态时，您必须使用功能状态更新，否则每个后续排队更新都会覆盖先前的更新。 for 循环位于组件主体中，这意味着每次组件由于状态更新而重新渲染时，都会设置另一组入队状态更新。

解决方案

如果您想在同步循环中对所有更新进行排队，那么应该在挂载useEffect 挂钩中完成一次，并对超时应用增量，这样它们就不会同时过期。

useEffect(() => 
  items.forEach((item, i) => setTimeout(
    () => setMediaItem(item),
    (i + 1) * 5000, // 5000, 10000, 15000
  ));
, []);

在 state 中使用/存储数组 index 并在间隔内递增它可能会更容易一些。

const items = [ name: "one" ,  name: "two" ,  name: "three" ];

function AppExample() 
  const [mediaItem, setMediaItem] = React.useState(items[0]); // <-- seed initial state
  const [index, setIndex] = React.useState(0);

  React.useEffect(() => 
    const timerId = setInterval(
      () => setIndex((i) => (i + 1) % items.length), // <-- increment index
      2000
    );
    return () => clearInterval(timerId);
  , []);

  React.useEffect(() => 
    setMediaItem(items[index]); // <-- update media state when index updates
  , [index]);

  return (
    <div className="App">
      <div>Media: mediaItem.name</div>
    </div>
  );