React Flux应用程序未正确显示数据

时间:2018-04-27 18:51:03

标签: reactjs reactjs-flux

我试图重构我的React应用程序,它正在使用回调来通过。 我差不多完成了,但无法解决一个小bug。该应用程序通过从youtube获取数据来显示youtube视频。 现在,当第一次加载应用程序时,它正确显示视频。 enter image description here

选择功能正常工作以及搜索功能 enter image description here

但是,如果我在第一次渲染后选择一个视频然后进行搜索。它没有显示搜索的第一个视频。 enter image description here

我知道问题出在 video_detail.js 文件的这部分代码中。 我的git repo for this app git repo for youtube-player-flux

请帮我解决这个小虫子。

render() {
    if (!this.state.item) {
      return <li className="media-right">Loading...</li>;
    }
    let video;
    Object.keys(this.state.userSelected).length === 0
      ? (video = this.state.item)
      : (video = this.state.userSelected);

    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} />
        </div>
        <div className="details">
          <div>{video.snippet.title}</div>
          <div>{video.snippet.description}</div>
        </div>
      </div>
    );
  }
}

0 个答案:

没有答案