Child Reactjs Komponente nicht neu rendern

Question

Ich habe 2 Komponenten.

• Youtube - übernimmt die searchbar und einen Behälter für die Suchergebnisse
• YoutubeSearchResults - wie angedeutet ... zeigt die Suchergebnisse nach einem Ajax-Aufruf

Zum ersten Mal beendet ist, wenn Sie suchen nach etwas, das Ergebnis zeigt sich gut. Aber wenn Sie erneut suchen (Abfrage geändert oder nicht), wird YoutubeSearchResults nicht aktualisiert (/ re-render), obwohl die Render-Funktion aufgerufen und ausgeführt wird (ich weiß, weil verschiedene show.output von console.log). Ich kann nicht herausfinden, warum das passiert und keine Suche scheint ähnlich zu sein, was ich erlebe.

Youtube Komponente:

... 
render() { 
    let body = null; 
    if(this.state.data !== null) { 
     body = <YoutubeSearchResults data={this.state.data} /> 
    } 
    return (
     <div> 
      <div className="youtube-header"> 
       <form name="youtube-search" action="" onSubmit={this.search.bind(this)} method="post" ref="youtubeSearch"> 
        <input type="text" name="q" placeholder="Search" autoComplete="off" /> 
       </form> 
      </div> 
      <div className="youtube-body" ref="youtubeBody">{body}</div> 
     </div> 
    ); 
} 
search(e) { 
    let self = this; 

    ... ajax request ... }, function(data) { 
     self.setState({ data: data }); 
    }); 
} 

YoutubeSearchResults Komponente:

export default class YoutubeSearchResults extends React.Component { 
    constructor(props) { 
     super(props); 

     this.state = { 
      data: null, 
      currentPage: 0, 
      currentVideoId: null 
     }; 
    } 
    componentWillReceiveProps() { 
     this.setState({ currentVideoId: null }); 
    } 
    render() { 
     let self = this; 
     ... 
     return (
      <div> 
       {(this.state.data||this.props.data).map(function(obj, key) { 
        return (
         <div key={key}> 
          <img src={obj.thumbnails.medium} className="youtube-result-thumbnail" /> 
          <h3 className="youtube-result-title">{obj.title}</h3> 
          <div className="youtube-result-duration"> 
           <span>{obj.contentDetails.duration.toSeconds().parseDuration()}</span> 
          </div> 
         </div> 
        ); 
       })} 
       ... 
      </div> 
     ); 
    } 
    ... 
} 

Answer 1

Ok, so habe ich es heraus. Als ich eine Suche durchgeführt habe, habe ich den Suchergebnis-Container geleert.

search(e) { 
    let self = this; 

    ... ajax request ... }, function(data) { 
     $(self.refs.youtubeBody).empty(); // <-- This was the issue 
     self.setState({ data: data }); 
    }); 
} 

Sie wissen nicht, warum ich nicht dieses, bevor dachte aber ja, ich bin Vermutung es effektiv war das Löschen so die YoutubeSearchResults Komponente, wenn die Requisiten zu aktualisieren es nicht gesetzt oder etwas wurde. Habe es irrtümlicherweise auch nicht in Frage gestellt, weil ich damals nicht gedacht habe, dass das das Problem war.

Wenn Sie ein ähnliches Problem haben, stellen Sie sicher, dass Sie die Komponente nicht entfernen.

Answer 2

Sie benötigen Zustand in geordnete Komponente zu aktualisieren, wenn es neue Eigenschaften erhält:

componentWillReceiveProps(newProps) { 
    this.setState({ currentVideoId: null, data: newProps.data }); 
} 

Dieses Update wird auch Trigger erneut rendern.

Answer 3

Wenn Sie in React nur etwas ohne Änderungen anzeigen müssen, vermeiden Sie die Speicherung im Status. Das fügt unnötige Komplikationen und Rendering-Overhead hinzu.

Ich habe das überflüssige Zustandsobjekt für data entfernt und den mehrdeutigen (this.state.data||this.props.data) Mapping-Aufruf entfernt. Funktioniert der folgende Code für Sie?

YoutubeSearchResults:

export default class YoutubeSearchResults extends React.Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
      currentPage: 0, 
      currentVideoId: null 
     }; 
    } 
    componentWillReceiveProps() { 
     this.setState({ currentVideoId: null }); 
    } 

    render() { 
     const data = this.props.data; 
     // ... 
     return (
      <div> 
       { data.map((obj, key) => { 
        return (
         <div key={key}> 
          <img src={obj.thumbnails.medium} className="youtube-result-thumbnail" /> 
          <h3 className="youtube-result-title">{obj.title}</h3> 
          <div className="youtube-result-duration"> 
           <span>{obj.contentDetails.duration.toSeconds().parseDuration()}</span> 
          </div> 
         </div> 
        ); 
       })} 

      </div> 
     ); 
    } 
    // ... 
}