데이터 유치시에만 react-redux 렌더링

Question

서버로부터의 데이터 요청이 있습니다.

내 jsx에서 주 구성 요소는 해당 서버 측 요청에서받은 보조 구성 요소를 사용하여 하위 구성 요소를 호출합니다.

무슨 일이 일어나는가는 데이터가 도착하기 전에 페이지가 렌더링된다는 것입니다. 문제는 내 데이터를 내 divs 빌드해야합니다.

내 아이 컴퍼넌트 : 나는 무슨 일을하고있는 중이 야

render() { 
    var append =[]; 
    var wlStatistics = this.props.wlStatistics; 
    ....Some logic(building some html here based on the values on wlStatistics) 
    return <div className="col-md-6"> 
     {append} 
    </div> 
} 

문제는의 wlStatistics 데이터가 도착하기 전에 해당 페이지가 렌더링됩니다입니까?

Answer 1

이 예상되는 동작 아래 예제 코드를 다시 렌더링하지 않고 표시됩니다. 구성 요소의 초기 렌더링은 감속기의 "initialState"데이터와 함께 발생합니다 (이 시점에서 null로 표시됨). 이 기회를 빌려 "로드 중"구성 요소를 표시하거나 서버에서 데이터가로드되고 있음을 사용자에게 알리는 것이 좋습니다.

render() { 
    const { wlStatistics } = this.props; 

    if(!wlStatistics) { 
     return (<MyCoolLoader />); 
    } 

    return (
     <div className="col-md-6"> 
      {append} 
     </div> 
    ); 
} 

그러면 작업의 페이로드 결과에서 다음 상태 업데이트가 업데이트 된 상태로 구성 요소를 다시 렌더링합니다.

Answer 2

주의 : 네트워크 통화는 비동기식이며 반응은 네트워크 통화가 완료 될 때까지 기다리지 않습니다. this.props.wlStatistics가 유효하기 전에 기본 소품을 전달하거나 로딩 회 전자를 표시 할 수 있습니다. 데이터를 사용할 다음 때 구성 요소는 비동기하게 될 네트워크 요청으로

const VideoDetail = ({video}) => { 
 
//check if prop video passed is not null 
 
if(!video){ 
 
    //show this if the video request is not done 
 
    return <div>Loading..........</div>; 
 
} 
 
const videoId = video.id.videoId; 
 
const url = `https://www.youtube.com/embed/${videoId}`; 
 
return (
 
    <div className="video-detail col-md-8"> 
 
    <div className="embed-responsive embed-responsive-16by9"> 
 
     <iframe className="embed-responsive-item" src={url}></iframe> 
 
    </div> 
 
    <div className="detail"> 
 
     <div>{video.snippet.title}</div> 
 
     <div>{video.snippet.description}</div> 
 
    </div> 
 
    </div> 
 
); 
 

 
}