时间戳

首页 > 解决方案 > (React) 动态组件条件setstate

javascript - (React) 动态组件条件setstate

问题描述

我正在尝试创建一个动态组件，该组件将数据索引与我通过路由器获得的 URL 参数 blogID 匹配。

这里我有路由器参数并将道具发送到组件

<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>
        )  
    }

标签： javascriptreactjsreact-router

解决方案

你得到一个在你的渲染方法中调用 setState 的无限循环的原因，这会导致重新渲染，这会导致 setState，这会导致重新渲染......等等。

尝试将这部分移出渲染方法。

this.props.blogData.map((val, idx) => ( idx == blogId ? this.setState({blogData:val }) : null ))

推荐阅读