Question

我刚刚开始使用react / redux并遇到异步数据处理问题，这里我有一个父组件（App），我会调用操作创建者来获取数据，然后将其传递给子组件（VideoList ）

    `class App extends React.Component {
       componentDidMount() {
           this.onFormSubmit()
       }

       state = { selectedVideo: null }

       onVideoClick = (video) => {
           this.setState({selectedVideo: video});
       };

       onFormSubmit = (term) => {
           this.props.fetchList(term)
       }
       render() {
           return (
               <div>
                   <Header/>
                   <div  className="container">
                       <VideoDetail video={this.state.selectedVideo}/>
                       <VideoList videos={this.props.videos}/>
                   </div>
               </div>
           )
       } }

   const mapStateToProps = state => {
       return {videos: state.videos} }

   export default connect(mapStateToProps,{fetchList})(App)

    `

现在在子组件上，我正在尝试映射视频数组，但它一直告诉我映射不是函数，我知道那是因为数据尚未来自youtube api，所以我该如何解决这个问题？

请注意：在尝试设置Redux之前，该应用已正常运行

    class VideoList extends React.Component {
    renderList() {
        this.props.videos.map(video => {
            return <VideoItem video={video} onVideoClick={this.onVideoClick} key={video.id.videoId}/>
        });
    };
    render() {
        console.log(this.props.videos);
        return (
            <div> 
                {this.renderList()}
            </div>
        )
    }
}

Answer 1

将您的视频中的视频设置为空数组。然后尝试：

module testbench;
timeunit 1ns;
timeprecision 100ps;
initial begin
  $display($time, " << Starting the Simulation >>");
    rstn = 1'b0;
    clk = 0;
    #5 rstn = 1'b1;
end

always #PERIOD clk=~clk;


initial
begin
      $dumpfile("your_choice_of_name.vcd");
      $dumpvars;
end

initial
begin
//whatever you come up
end

endmodule

Answer 2

正如您提到的那样，由于尝试映射不包含任何数据的列表而收到此错误。您可以编写一些额外的逻辑，说“仅在列表包含数据时才执行。”

renderList() {
    if(this.props.videos){
       this.props.videos.map(video => {
          return <VideoItem video={video} onVideoClick={this.onVideoClick} key={video.id.videoId}/>
       });

    }
};

Answer 3

这可能是因为来自化简器的getAbsoluteTransform().point()不是数组，您只需要将其初始状态设置为videos。我会对此发表评论，但我仍然不能。

react-redux子组件中的异步数据

3 个答案: