Question

我正在尝试制作一个从Youtube Api获取数据的反应应用程序。 App是我的主要组件，VideoList是子组件。当我将VideoList组件包含到App组件的渲染功能中时，控制台会显示错误，输出是一个空白页面。据我所知，输出应为5，因为视频数组的长度为5。我无法理解我在哪里犯错误。我是新的反应任何帮助将不胜感激。这是我的代码

应用组件

       class App extends Component {

       constructor(props)
       {
        super(props);

         this.state={ videos: [] };

          YTSearch({key:API_KEY, term:'surfboards'},(data) =>{
         this.setState({videos:data});
      } );

      }

      render()
       {
        return (
         <div>
          <SearchBar/>
           <VideoList videos={this.state.videos}/>
         </div>
        );
       }


        }

VideoList组件

                const VideoList = (props) =>
                {
                 return 
                 (   <div>
                      <ul className="col-md-4 list-group">
                       {props.videos.length}
                       </ul>
                      </div>
                 );

                 }

Answer 1

我认为，编写组件的方式存在问题，您需要像这样编写：

const VideoList = (props) => {
    return (   // ( should be in the same line
        <div>
            <ul className="col-md-4 list-group">
                {props.videos.length}
            </ul>
        </div>
    );
}

因为如果你这样写：

return
(
.....

它不会return任何内容，将被视为返回;

建议：而不是在constructor中提取数据，而是在componentDidMount生命周期中执行api调用，如下所示：

componentDidMount(){
     YTSearch({key:API_KEY, term:'surfboards'},
         (data) => {
            this.setState({videos:data});
         }
     )
}

为什么渲染功能不起作用？

1 个答案: