javascript - 在父母之前反应孩子道具渲染？

Question

我正在关注 Udemy 上 Stephen Grider 的 Simple Redux Simple Starter。基本上，我需要做的就是将来自 youtube api 的视频数量返回到 DOM。下图 input 的正下方应该{props.videos.length}在 video_list.js 中调用时显示 5，但总是返回 0。是先渲染 child prop，还是 child 的 state 没有正确更新？请注意，第一个控制台日志来自 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;

标签： javascriptreactjsstate

Answer 1

您正在覆盖该setState功能。删除=来调用它。

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