我正在尝试创建一个动态组件,该组件将数据索引与我通过路由器获得的 URL 参数 blogID 相匹配。
这里我有路由器参数并将 Prop 发送到组件
<Route path='/blog/:blogId/:blogTitle' render={() => <BlogPost blogData={this.state.blogData} /> } />
然后在组件上设置初始状态并尝试呈现与数据索引匹配的数据,但我收到组件重复调用 setstate 和无限循环的错误。
constructor(props){
super(props);
this.state = {
blogId:'',
blogTitle:'',
blogData:[]
}
}
render(){
const { params:{ blogId, blogTitle } } = this.props.match;
// so i map here to get the index and set the conditional to set the new state but I don't know where or how exactly
this.props.blogData.map((val, idx) => (
idx == blogId ?
this.setState({blogData:val }) : null
))
return (
<div>
<BlogView title={this.state.blogData.title} />
</div>
)
}
最佳答案
你得到一个无限循环的原因是在你的渲染方法中调用 setState,这会导致重新渲染,这会导致 setState,这会导致重新渲染......等等。
尝试将这部分移出渲染方法。
this.props.blogData.map((val, idx) => (
idx == 博客编号? this.setState({blogData:val }) : null ))
关于javascript - (React) 动态组件条件设置状态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58075403/