Не определено при передаче реквизита для братьев и сестер реагировать

Question

новый реагировать и пытается пройти, реквизит компонентов с реагировать.но получает undefined результат при получении {this.props.name} в Track.js.И TypeError: Cannot read property 'name' of undefined при попытке использования {this.props.track.name} в методе рендеринга Track.js.

Должен отображаться этот трек:

            tracks: [{
                name: 'Gold Slug',
                artist: 'DJ khaled',
                album: 'We da best',
                id: '102 sample ID'
            },
                {
                    name: 'Slim shady',
                    artist: 'Eminem',
                    album: 'Marshal materials',
                    id: '103 sample ID'
                }

Или этот трек:

        searchResults: [{
            name: 'You Mine',
            artist: 'DJ Khaled',
            album: 'I Changed a Lot',
            id: '101 sample ID'
        }],

Справочная информация: создание приложения, которое отображает треки песен с именем, исполнителем и альбомом.Также поиск с результатами поиска и плейлистом.Я работаю с 6 компонентами: приложение, PlayList, SearchBar, SearchResults, Track и TrackList.

Приложение представляет собой контейнер.PlayList позволяет пользователям добавлять треки к нему.SearchResults отображает результаты из панели поиска.

В App.js я установил состояние searchResults в методе конструктора и передал его компоненту.

App.js:

import React from 'react';
import './App.css';
import SearchBar from '../SearchBar/SearchBar'
import SearchResults from "../SearchResults/SearchResults";
import Playlist from "../Playlist/Playlist";    

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            searchResults: [{
                name: 'You Mine',
                artist: 'DJ Khaled',
                album: 'I Changed a Lot',
                id: '101 sample ID'
            }],
            tracks: [{
                name: 'Gold Slug',
                artist: 'DJ khaled',
                album: 'We da best',
                id: '102 sample ID'
            },
                {
                    name: 'Slim shady',
                    artist: 'Eminem',
                    album: 'Marshal materials',
                    id: '103 sample ID'
                }
            ]
        };
    }

    render() {
    return (
        <div>
            <h1>Ja<span className="highlight">mmm</span>ing</h1>
            <div className="App">
                <SearchBar />
                <div className="App-playlist">
                    <SearchResults searchResults={this.state.searchResults}/>
                    <Playlist />
                </div>
            </div>
        </div>
    );
  }
}

export default App;

SearchResultsполучает и .map выполняет итерацию по массиву и устанавливает его для треков внутри компонента TrackList в методе рендеринга.

SearchResults.js:

import React from 'react';
import './SearchResults.css'
import TrackList from "../TrackList/TrackList";
import Track from "../Track/Track";

class SearchResults extends React.Component {
    render() {
        return (
            //Adds a map method that renders a set of Track components on the tracks attribute.
            <div className="SearchResults">
                <h2>Results</h2>
                <TrackList tracks={this.props.searchResults.map(track => {
                    return <Track key={track.id} /> }
                )} />
            </div>
        )
    }
}

export default SearchResults;

TrackList.js отображает набор компонентов трека:

import React from 'react';
import './TrackList.css'
import Track from '../Track/Track'

class TrackList extends React.Component {
    render() {
        return (

            <div className="TrackList">
                <Track />
                <Track />
                <Track />
                <Track />
            </div>
        )
    }

}

export default TrackList;

Рендеринг Track.js Треки:

import React from 'react';
import './Track.css'

class Track extends React.Component {

    renderAction() {
        if (this.props.isRemoval == true) {
            return <h1>-</h1>;
        } else {
            return <h1>+</h1>;
        }
    }   

    //TODO: Fix rendering method on this.props.track.name
    render() {
        return (
            <div className="Track">
                <div className="Track-information">
                    <h3>{this.props.name}</h3>
                    <p>{`${this.props.artist} | ${this.props.album}`}</p>
                </div>
                <a className="Track-action" isRemoval={true}></a>
            </div>
        )
    }
}

export default Track;

Answer 1

Проблема здесь в том, что вы фактически не передаете данные в компонент Track.

class SearchResults extends React.Component {
    render() {
        return (
            //Adds a map method that renders a set of Track components on the tracks attribute.
            <div className="SearchResults">
                <h2>Results</h2>
                <TrackList tracks={this.props.searchResults.map(track => {
                    return <Track key={track.id} /> }
                )} />
            </div>
        )
    }
}

Похоже, SearchResults пытается отобразить данные, полученные с помощью реквизита, и отображать Track для каждого.Теперь, если вы посмотрите на эту строку прямо здесь, вы заметите, что данные на самом деле не передаются.

return <Track key={track.id} /> }

Я думаю, чтобы исправить вашу проблему, все, что вам нужно сделать, это.

class SearchResults extends React.Component {
    render() {
        return (
            //Adds a map method that renders a set of Track components on the tracks attribute.
            <div className="SearchResults">
                <h2>Results</h2>
                <TrackList tracks={this.props.searchResults.map(track => {
                    return <Track key={track.id} track={track} /> }
                )} />
            </div>
        )
    }
}

Теперь в компоненте Track вы можете получить доступ к this.props.track.whatever.