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

这是预期的行为，因为您的网络请求将是异步的。组件的初始渲染将与＆＃34; initialState＆＃34;您的reducer中的数据（此时似乎为null）。这很好，因为你可以借此机会展示一个＆＃34; Loading＆＃34;用于向用户指示数据正从服务器加载的组件或其他内容。

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

react-redux仅在数据转移时呈现

2 个答案: