(Реагировать) динамический компонент условного множества

Question

Я пытаюсь создать динамический компонент, который сопоставляет индекс данных с параметром URL blogID, который я получаю с маршрутизатором.

Здесь у меня есть параметры маршрутизатора и я посылаю реквизиты компоненту

<Route path='/blog/:blogId/:blogTitle' render={() => <BlogPost blogData={this.state.blogData} /> }  />     

затем в компоненте я устанавливаю начальное состояние и пытаюсь отобразить данные, которые соответствуют индексу данных, но я получаю ошибку компонента, неоднократно вызывающего settate и бесконечные циклы.

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

Answer 1

Причина, по которой вы получаете бесконечный цикл, который вызывает setState в вашем методе рендеринга, который вызывает повторный рендеринг, который вызывает setState, который вызывает рендеринг ... и так далее.

Попробуйте переместить эту часть из метода рендеринга.

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

Answer 2

Вы не должны устанавливать setState внутри функции render (), причина в том, что когда вы устанавливаете состояние, compoennt необходимо повторно выполнить рендеринг, чтобы показать пользователю обновленные данные, а затем выполнить повторный рендеринг снова и снова, вместо этого сделайте это в componentDidMount lifeCycleметод, чтобы он работал только один раз

componentDidMount() {
  const { params:{ blogId, blogTitle } } = this.props.match;  
  this.props.blogData.map((val, idx) => ( 
    idx == blogId ? 
    this.setState({blogData:val }) : null                               
  ))
}

Answer 3

Да, наконец-то я это сделал,

Я установил состояние для componentDidMount ()

componentDidMount(){                        
  const { params:{ blogId, blogTitle } } = this.props.match;           
  this.setState({blogId, blogTitle});
} 

и сравнение на рендере, и оно отлично работало

const blogger =  this.props.blogData.map((val, idx) => (             
            idx == this.state.blogId ?
                <BlogView 
                    title={val.title}
                    body={parse(val.body)}
                    img={val.thumb}
                />
                : null            
        )) 

Answer 4

Добавить условный блок перед вызовом установленного состояния внутри рендера.если оба значения одинаковы, не вызывайте установленное состояние.

   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 && val != this.state.blogData) ? 
                this.setState({blogData:val }) : null                               
        ))
        return (                          
          <div>              


           <BlogView title={this.state.blogData.title} />


          </div>
        )  
    } 

Answer 5

Если вы вызовете setState в рендере таким образом, вы будете вызывать бесконечные циклы.

Вам не нужно setState, когда вы найдете blog, просто используйте его titleв BlogView после find:

render() {                  
    const { params:{ blogId, blogTitle } } = this.props.match;        

    const blog = this.props.blogData.find((val, idx) => idx === blogId);
    return (                          
        <div>
            <BlogView title={blog.title} />
        </div>
        );  
}