我有一系列玩家可以映射。用户不断地向这个数组中添加新玩家。我通过数组映射并返回一组元素。我希望列表中的每个玩家一次渲染一个,中间间隔 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>
)
}
最佳答案
您可以使用效果创建一个间隔,每 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>
)
}
关于javascript - 如何在 reactJS 的 .map() 中使用 setTimeout,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62307864/