javascript - 在 parent 之前 react child Prop 渲染？

Question

我正在关注 Udemy 上 Stephen Grider 的 Simple Redux Simple Starter。基本上，我需要做的就是将视频数量从 youtube api 返回到 DOM。在video_list.js中调用{props.videos.length}时，下图输入正下方应该显示5，但总是返回0。是子 Prop 先渲染，还是 child 的状态没有正确更新？请注意，第一个控制台日志来自 video_list，第二个来自 App 类中的 index.js。

索引.js

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import YTSearch from 'youtube-api-search';
import VideoList from './components/video_list';
const API_KEY = 'XXXXXXXXXXXXXXX';

class App extends Component {
    constructor(props) {
        super(props);

        this.state = { videos: [] };

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

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

ReactDOM.render(<App />, document.querySelector('.container'));

video_list.js

import React from 'react';

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

export default VideoList;

Answer 1

您正在覆盖 setState 函数。删除 = 以改为调用它。

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