如何解决React中的延迟数组映射迭代
react的呈现功能是同步的。javascript映射也是同步的。因此,在这里使用计时器不是正确的解决方案。
但是,您可以在组件状态下跟踪已渲染的项目,并使用javascript计时器更新该状态:
示例实现看看这个小提琴:
React.createClass({
getinitialState() {
return {
renderedThings: [],
itemsRendered: 0
}
},
render() {
// Render only the items in the renderedThings array
return (
<div>{
this.state.renderedThings.map((thing, index) => (
<div key={index}>{thing.content}</div>
))
}</div>
)
},
componentDidMount() {
this.scheduleNextUpdate()
},
scheduleNextUpdate() {
this.timer = setTimeout(this.updateRenderedThings, 1000)
},
updateRenderedThings() {
const itemsRendered = this.state.itemsRendered
const updatedState = {
renderedThings: this.state.renderedThings.concat(this.props.things[this.state.itemsRendered]),
itemsRendered: itemsRendered+1
}
this.setState(updatedState)
if (updatedState.itemsRendered < this.props.things.length) {
this.scheduleNextUpdate()
}
},
componentwillUnmount() {
clearTimeout(this.timer)
}
})
解决方法
我有这个数组,我想迭代。我需要在下一个之前延迟几秒钟。
{this.props.things.map((thing,index) => {
return (
<div key={index}>{thing.content}</div>
// Delay 1 second here
)
})}
此数组的初始状态始终不止一个。为了实现UI,我希望它们一一加载到DOM中。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。