子Reactjsコンポーネントは再レンダリングされません

Question

私は2つのコンポーネントを持っています。

• YouTubeの - 検索バーを処理し、検索のためのコンテナが
• YoutubeSearchResults結果 - 暗示として... AJAX呼び出しをするとき、初めて

を終えた後に、検索結果を示しています結果がうまく表示されるものを検索します。しかし、再度検索すると（クエリが変更されたかどうか）、YoutubeSearchResultsは呼び出されて実行されているにもかかわらず、更新/再レンダリングしません（さまざまなconsole.logの出力が表示されるため）。なぜこのようなことが起こっているのかわかりませんし、検索は私が経験しているものに似ているようです。

Youtubeコンポーネント：

... 
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コンポーネント：

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]をので、私はそれを考え出しました。私が検索を行っているとき、私は検索結果コンテナを空にしていました。私は考えていなかった理由を

search(e) { 
    let self = this; 

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

は知ってはいけない。この前しかし、ええ、私はそれが設定されていなかった小道具や何かを更新するときに、それが効果的にそうYoutubeSearchResultsコンポーネントを削除して想定しています。間違いなく私はそれが当時の問題ではないと思ったので私の質問からもそれを残しました。

同様の問題が発生した場合は、コンポーネントを削除していないことを確認してください。

Answer 2

あなたはそれが新しいプロパティを受信したときに子コンポーネントの状態を更新する必要があります。

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

このアップデートはまた、トリガーされます再レンダリングする。

Answer 3

修正しないで表示する必要がある場合は、状態で保存しないでください。それは、不必要な複雑さとレンダリングオーバーヘッドを追加します。

dataの余分な状態オブジェクトを削除し、あいまいな(this.state.data||this.props.data)マッピング呼び出しを削除しました。次のコードはあなたのために機能しますか？

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> 
     ); 
    } 
    // ... 
}