时间戳

首页 > 解决方案 > 如何在 reactJS 中的 .map() 中使用 setTimeout

javascript - 如何在 reactJS 中的 .map() 中使用 setTimeout

问题描述

我有一系列玩家，我通过这些玩家进行映射。用户不断地向这个数组添加新玩家。我通过数组映射并返回一组元素。我希望列表中的每个玩家一次渲染一个，其间间隔为 500 毫秒。这是我到目前为止的代码：

export const ShowDraftedPlayers = props => {
  const {
    draftedPlayers,
    getPlayerProfile,
    teams,
    draftPos,
    myTeam } = props;
  let playersDraftedList = draftedPlayers.map((player, index) => {
    return (
      <div key={index} className='drafted'>
        <p style={style}>TEAM {player.teamDraftedBy} </p>
          <b className='player-lastName'> {player.displayName} </b>
           {player.position}
        </p>
      </div>
    )
  })
  return (
    <div className='draftedPlayers-container'>
      {playersDraftedList}
    </div>
  )
}

标签： javascriptreactjsredux

解决方案

您可以使用效果创建每 500 毫秒更新一次计数器的间隔；然后，您的渲染逻辑可以每次渲染一个不断增长的数组切片。

export const ShowDraftedPlayers = props => {
  const {
    draftedPlayers,
    getPlayerProfile,
    teams,
    draftPos,
    myTeam
  } = props;

  const [count, setCount] = useState(0);

  useEffect(() => {
    let counter = count;
    const interval = setInterval(() => {
      if (counter >= draftedPlayers.length) {
        clearInterval(interval);
      } else {
        setCount(count => count + 1);
        counter++; // local variable that this closure will see
      }
    }, 500);
    return () => clearInterval(interval); 
  }, [draftedPlayers]);

  let playersDraftedList = draftedPlayers.slice(0, count).map((player, index) => {
    return (
      <div key={index} className='drafted'>
        <p style={style}>TEAM {player.teamDraftedBy} </p>
          <b className='player-lastName'> {player.displayName} </b>
           {player.position}
        </p>
      </div>
    )
  })
  return (
    <div className='draftedPlayers-container'>
      {playersDraftedList}
    </div>
  )
}

推荐阅读