Javascript 向兄弟姐妹传递道具时未定义

新的反应和尝试传递，道具组件与反应。但是在Track.js中接收

{this.props.name}

时，获取

未定义的

结果。和

TypeError:无法读取未定义的属性“name”

在track.js呈现方法中尝试使用

{this.props.track.name}

时

它应该渲染这些轨迹：

            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个组件：应用程序、播放列表、搜索栏、搜索结果、曲目和曲目列表

应用程序是一个容器。播放列表允许用户向其中添加曲目。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;

从“React”导入React；
导入“/App.css”；
从“../SearchBar/SearchBar”导入搜索栏
从“./SearchResults/SearchResults”导入搜索结果；
从“./Playlist/Playlist”导入播放列表；
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
搜索结果：[{
名字：'你是我的'，
艺人：“DJ Khaled”，
专辑：“我改变了很多”，
id:'101样本id'
}],
轨道：[{
名称：'金蛞蝓'，
艺人：“DJ khaled”，
专辑：“我们是最棒的”，
id:'102样本id'
},
{
名称：'苗条树荫'，
艺术家：“阿姆”，
专辑：“封送材料”，
id:'103样本id'
}
]
};
}
render（）{
返回(
詹姆明
);
}
}
导出默认应用程序；

SearchResults接收并.map遍历数组，并将其设置为render方法中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;

从“React”导入React；
导入“./SearchResults.css”
从“./TrackList/TrackList”导入轨迹列表；
从“./Track/Track”导入曲目；
类SearchResults扩展了React.Component{
render（）{
返回(
//添加在“轨迹”属性上渲染一组轨迹组件的贴图方法。
结果
{
返回}
)} />
)
}
}
导出默认搜索结果；

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;

从“React”导入React；
导入“./TrackList.css”
从“../Track/Track”导入轨迹
类TrackList扩展了React.Component{
render（）{
返回(
)
}
}
导出默认轨迹列表；

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;

从“React”导入React；
导入“./Track.css”
类跟踪扩展了React.Component{
渲染（）{
if（this.props.isRemoval==true）{
返回-；
}否则{
返回+；
}
}   
//TODO:修复此.props.track.name上的渲染方法
render（）{
返回(
{this.props.name}
{`${this.props.artist}{this.props.album}}

)
}
}
导出默认轨迹；

这里的问题是，您实际上没有将数据向下传递到

磁道

组件

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

---

现在，在

Track

组件中，您可以访问

this.props.Track.which

您没有向

组件传递任何道具

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