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

Question

我有一系列的球员，我可以通过这些球员来进行映射。用户不断地向这个阵列添加新的玩家。我映射数组并返回一组元素。我希望列表中的每个玩家一次渲染一个，中间间隔 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>
  )
}

Answer 1

您可以使用效果来创建一个间隔，每 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>
  )
}