React 道具没有出现在 Child 组件中（但我可以看到它们存在于调试模式下）

Question

我一直在创建一个简单的 React 项目（不使用 Redux），但在将状态从 parent 传递到 Child 组件时遇到问题。我看过多个教程并使用了 Chrome 调试器，但仍然无法解决问题。

我正在将 song-tracks 的列表从 Parent (App) 传递到 Child (PlaylistOptions)，但是，当我记录歌曲列表时它是空的，直到像第三次加载（附截图）。发生的另一件奇怪的事情是我能够立即访问第一首歌曲，但却使整个应用程序崩溃。我已经尝试将我的 child 从函数更改为 class，并且还在 child 中添加了一个 componentWillMount，等待道具加载，但没有解决我的问题。

以下是我将状态传递到 child 组件的方式：

<PlaylistOptions 
  wait={5000}
  items={this.state.items} 
  next={this.state.next}
  previous={this.state.previous}
  offset={this.state.offset}
  limit={this.state.limit}
  token={this.state.token}
/>

这是我的项目数组的控制台显示内容（该数组在第 3 次加载之前为空，我不知道为什么）

result of logging items array

尝试访问数组的第二个元素时出错

error in browser

error in console

Answer 1

您似乎正在尝试访问作为道具传入的项目数组的第二个元素。查看初始状态下 items 数组中有多少项。您正在尝试访问不存在的项目，这会引发错误。

您可以映射数组以根据数组中的条目数动态生成列表，而不是直接访问数组的索引。

<div>
    Song List
    {this.props.items.map((item, i) => {
       return(`Song ${i} - ${item.track.name}`);
    })}
</div>

Answer 2

下面是如何在 React 中将数据从父组件传递到子组件的完整示例：

父组件

import React, {Component, useEffect, useState} from 'react';
import PChild from "./PChild";

class Parent extends Component {
    constructor(props) {
        super(props);
        this.state = {items: []};
    }

    componentDidMount() {
        let json = [];
        json.push({track: { id:1, name: 'Black Sabbath, from the album Black Sabbath (1970)'}});
        json.push({track: { id:2, name: 'Blackfield, from the album Blackfield (2004)'}});
        json.push({track: { id:3, name: 'Bo Diddley, from the album Bo Diddley (1958)'}});
        json.push({track: { id:4, name: 'Damn Yankees, from the album Damn Yankees (1990)'}});
        this.setState({items: json});
    }

    render() {
        return (
            <div>
                <PChild items={this.state.items}/>
            </div>
        );
    }
}

export default Parent;

子组件

import React, {useEffect, useState} from 'react';

// Parent to Child communication
class PChild extends React.Component {

    render() {
        return (
            <div>
                {this.props.items.map((item, i) => {
                    return <li key={item.track.id}>
                        {(`Item ${i+1} - ${item.track.name}`)}
                    </li>
                })}
            </div>
        );
    }
}

export default PChild;

React 道具没有出现在 Child 组件中（但我可以看到它们存在于调试模式下）

React props not showing up in the Child component (but I can see they exist in debug mode)

javascript

jsx

reactjs

react-props