새로 고침하지 않으면 깊은 중첩 된 하위 구성 요소의 소품이 표시되지 않습니다.

Question

반응 애플리케이션을 구축 중이며 Redux를 사용하여 상태를 관리하고 라우터 v4를 라우팅합니다. 모듈 bundler로 webpack을 사용합니다. 그리고 그것은이 구조를 가지고 있습니다.

-Wrapper 
-Home/
-Homepage /h 
    --GalleryContainer /h/gallery 
     ---Gallery /h/gallery 
     ---Item /h/gallery/:itemId 
    --About /h/about 
    --Links /h/links 

은 내가 itemId 일치하는 경우에만 요소를 렌더링 할 Item 구성 요소에 있어요. 처음 표시 할 때 클릭하면 새로 고치지 않고 어떤 경우에는 모듈의 오류가 렌더링되지 않고 (그림의 경우) 렌더링되지만 페이지를 새로 고치면 렌더링되지 않으면 렌더링되지 않습니다. 렌더링은 다른 구성 요소에서는 잘 작동하지만이 경우에는 해당 매개 변수를 표시하는 데 필요한 매개 변수가 필요하지 않습니다.

올바른 방향으로 입력하거나 도움을 주시면 감사하겠습니다.

import React from 'react' 

class Item extends React.Component { 

    render() { 

    const item=this.props.items[this.props.match.params.itemId] 

    return (
     <div> 
     <h1> {item.title} </h1> 
     </div> 

    ) 
    } 
} 

export default Item 

편집 : 나는 그것을 클릭 한 후 표시 console.log(this.props.items) 경우처럼, 일반적으로 Item 구성 요소의 연결 구성 요소 표시에서 전달 된 소품. 하지만 일단 맞춤 매개 변수 const item=this.props.items[this.props.match.params.itemId]에 의해 조건이 지정되면이 문제가 발생합니다.

추가 GalleryContainer 노선

<div> 
    <Route path={`${this.props.match.path}`} 
    exact render={(props)=><Gallery 
     gallery={this.props.gallery} 
     {...props} />} /> 

    <Route path={`${this.props.match.path}/:itemId`} 
    render={(props)=><Item 
     gallery={this.props.gallery} 
     item={this.props.items} {...props} />} /> 

</div> 

또 다른 구성 요소가이 문제를 명확히 게시 할 수있는 경우는, 알려주세요.

해결책 마침내 효과가있었습니다. 내가

처음에 렌더링에 오류를 설명

<Link to={`h/portfolio/${pod.code}`}> 

에 공간을 추가 한 것으로 나타났다.

Answer 1

시도해보십시오.

 import React from 'react' 

     class Item extends React.Component { 
      constructor(props){ 
       super(props); 
       this.state={item:null}; 
      } 

      componentWillMount() 
      { 
       this.setState({item:this.props.items[this.props.match.params.itemId]}); 
      } 

      componentWillReceiveProps(nextProps) { 
       this.setState({item:nextProps.items[nextProps.match.params.itemId]}); 
      } 

     render() { 
      let {item} = this.state; 
      return (
      <div> 
      <h1> item?item.title:""} </h1> 
      </div> 

      ) 
     } 
     } 

     export default Item