javascript - React 似乎没有将 props 传递给另一个组件

Question

我按照有关如何构建 React 应用程序的教程进行操作，但遇到了一种奇怪的问题。

当我尝试将一些信息传递给另一个组件时，另一个组件获取了 props 但它是空的。

就我而言，index.js 是这样的:

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import YTSearch from 'youtube-api-search';

import SearchBar from './components/search_bar';
import VideoList from './components/video_list';

const API_KEY = 'AIzaSyDdvc_zComCpdqqfmwgOsZvLOwwPEabcde';

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

        this.state = {
            videos : []
        };
    }

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

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

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

我在./components/video_list.js中的代码如下:

import React, { Component } from 'react';

import VideoListItem from './video_list_item';

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

        this.state = {
            videoItems : []
        };
    }

    componentDidMount() {
        this.setState(
            {
                videoItems: this.props.videos.map(
                    video => {
                        console.log( video );
                        return <VideoListItem video={video} />;
                    }
                )
            }
        )
    }

    render() {
        return (
            <ul className="col-md-4 list-group">{ this.state.videoItems }</ul>
        );
    }
}

export default VideoList;

代码看起来很简单，但实际上有问题。

如果我在 index.js 中的 return 语句之前尝试此语句 console.log( this.state.videos ); 我得到以下输出:

// Initially I get this because the API is not yet completed:
Array[0]
    length: 0
    __proto__: Array[0]

// And then, once the API Request it is completed I get this:
Array[5]
    0: Object
        etag : ""5C5HHOaBSHC5ZXfkrT4ZlRCi01A/2H00YaVLWV4Xof09xk9Q8k6vlxw""
        id: Object
        kind: "youtube#searchResult"
        snippet: Object
        __proto__: Object
    1: Object
    2: Object
    3: Object
    4: Object
    length: 5
    __proto__: Array[0]

同时，如果我在 VideoList 组件的 constructor 方法中尝试使用 console.log( props ) ，我会得到以下结果输出:

Object {videos: Array[0]}
    videos: Array[0]
        length: 0
        __proto__: Array[0]
    __proto__: Object

您知道可能出了什么问题吗？你看到了我看不到的东西吗？

Answer 1

关于这一点 -

同时，如果我在 VideoList 组件的构造函数方法内尝试 console.log( props )，我会得到以下输出:

Object {videos: Array[0]}
    videos: Array[0]
        length: 0
        __proto__: Array[0]
    __proto__: Object

这是绝对正确的行为。

发生这种情况是因为在 React 组件生命周期中，您的子组件首先被渲染，此时您传递给子组件的 props 将具有默认值或空值(例如 [])。

现在你的 child 被渲染了，父渲染发生了。

当父级完全渲染时，调用父级的componentDidMount方法，您在其中发出了一些ajax请求来下载动态数据，在您的情况下是视频列表。

你正在这样做，这也是完全有效的 -

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

数据通过ajax传入后，您在父组件中再次设置状态，这会导致渲染周期再次发生。

            this.setState ( { videos } );

现在您的 child 将收到更新后的新视频列表数组。

子项的渲染再次发生，其中将包含视频列表。

但是由于您的父属性已更改并且要接收新的属性，您需要添加新的生命周期方法。

componentWillReceiveProps

在这里，您可以将旧 Prop 与新 Prop 进行比较，并将状态设置为更新后的 Prop 。这将使用最新更新的数据呈现子组件。

componentWillReceiveProps(nextProps) {
        this.setState(
            {
                videoItems: nextProps.videos.map(
                    video => {
                        console.log( video );
                        return <VideoListItem video={video} />;
                    }
                )
            }
        )
}