深いネストされた子コンポーネントの小道具は、リフレッシュしない限り表示されません。

Question

私はリアクションアプリケーションをビルドしています。私はReduxを使って状態を管理し、ルーターのv4をルーティングします。私はモジュールバンドラーとして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