하위 Reactjs 구성 요소가 다시 렌더링되지 않음

Question

구성 요소가 2 개 있습니다.

• 유튜브 - Ajax 호출을 처음

후 10 때 검색 결과를 도시 ... 묵시적으로 - 검색 창 및 검색을위한 컨테이너

YoutubeSearchResults 결과 처리 결과가 잘 나타나는지 검색합니다. 하지만 쿼리를 변경하거나 쿼리를 다시 검색 할 때 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

좋아, 나는 그것을 알아 냈 있도록. 검색을 수행 할 때 검색 결과 컨테이너를 비 웠습니다. 내가 생각하지 않은 이유

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