Реагировать реквизиты не отображаются в дочернем компоненте (но я вижу, они существуют в режиме отладки) - PullRequest
Новая
       18

Реагировать реквизиты не отображаются в дочернем компоненте (но я вижу, они существуют в режиме отладки)

0 голосов
/ 09 апреля 2020

Я создаю простой проект React (не использующий Redux), и у меня возникают проблемы при передаче состояния от родителя в дочерний компонент. Я просмотрел несколько учебных пособий и прошел отладчик Chrome, но до сих пор не могу выяснить, в чем проблема.

Я передаю список композиций из Parent (App) в Child (PlaylistOptions) однако, когда я регистрирую список песен, он пуст до 3-й загрузки (скриншот прилагается). Еще одна странная вещь, которая случается, это то, что я могу сразу получить доступ к первой песне, но целое приложение делает sh Я попытался изменить своего ребенка с функции на класс, а также добавил в дочерний компонент componentWillMount с временем ожидания загрузки реквизита, но ничего не решило мою проблему.

Вот как я передаю состояние в дочерний компонент: 

<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}
/>

Это то, что консоль показывает для моего массива items (массив пуст до 3-й загрузки у меня есть) понятия не имею почему)

результат записи массива элементов

Ошибки при попытке доступа ко второму элементу массива

ошибка в браузере

ошибка в консоли

Ответы [ 2 ]

0 голосов
/ 10 апреля 2020

Вот полный пример того, как вы передаете данные из родительского компонента в дочерний компонент в 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;
0 голосов
/ 09 апреля 2020

Похоже, вы пытаетесь получить доступ ко 2-му элементу массива items, который передается в качестве реквизита. Посмотрите, сколько элементов находится в массиве элементов в исходном состоянии. Вы пытаетесь получить доступ к элементу, который не существует, и это вызывает ошибку.

Вместо прямого доступа к индексам массива, вы можете отобразить массив, чтобы динамически генерировать список на основе количество записей в массиве. 

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