Requisiten von tief verschachtelten untergeordneten Komponenten werden nicht angezeigt, wenn ich nicht aktualisiere

Question

Ich baue eine Reactive-App, ich benutze Redux, um den Zustand zu verwalten und Router v4 für Routing zu reagieren. Ich benutze Webpack als Modul Bundler. Und es hat diese Struktur.

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

Ich bin bei Item Komponente, wo ich nur das Element machen würde, die itemId übereinstimmt. Wenn ich zum ersten Mal klicke, um anzuzeigen, wird es nicht gerendert, es sei denn, ich aktualisiere und in einigen Fällen rendert einen Fehler des Moduls nicht gefunden (für Bild) aber rendere, wenn ich die Seite aktualisiere. Das Rendering funktioniert gut bei anderen Komponenten, aber nicht bei diesem, bei dem passende Parameter für die Anzeige der entsprechenden Requisiten benötigt werden.

Jede Eingabe oder Hilfe in die richtige Richtung wäre willkommen.

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 

bearbeiten: Die Stützen von Connect-Komponente zeigt normalerweise in Item Komponente übergeben, wie wenn ich es nach dem Klicken auf console.log(this.props.items) anzeigt. aber sobald sie durch benutzerdefinierte Parameter const item=this.props.items[this.props.match.params.itemId] konditioniert sind, bekomme ich dieses Problem.

Hinzufügen GalleryContainer Routen

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

Wenn es weitere Komponenten schreiben diese Frage zu klären, lassen Sie es mich wissen.

Lösung Es hat endlich funktioniert. Es stellt sich heraus, dass ich einen Platz in

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

hinzugefügt, die den Fehler bei Rendering zum ersten Mal erklärt.

Answer 1

Versuchen Sie dies.

 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