新的 React 并尝试传递,props 到具有 React 的组件。但在 Track.js 中接收 {this.props.name}
时得到 undefined
结果。和 TypeError: Cannot read property 'name' of undefined
在 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 个组件:App、PlayList、SearchBar、SearchResults、Track 和 TrackList。
应用程序是一个容器。 PlayList 允许用户向其中添加轨道。 SearchResults 显示来自 SearchBar 的结果。
在 App.js 中,我在构造方法中设置了 searchResults 的状态并将其传递给组件。
应用程序.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 遍历数组并将其设置为在 render 方法中的 TrackList 组件中的轨道。
搜索结果.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;
最佳答案
这里的问题是您实际上并没有将数据传递给 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
正在尝试映射通过 Prop 获取的数据,并呈现 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
.
关于javascript - 将 Prop 传递给 sibling reactJS 时未定义,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53643624/