[英]How to resolve " Cannot read property 'map' of undefined" error in React Js
I'm following a React JS tutorial and I'm attempting to pass props from one component to another in order to render a list of tracks.我正在关注 React JS 教程,我试图将道具从一个组件传递到另一个组件以呈现曲目列表。 I've looked at few threads with similar issues but none of the suggestions have resolved my issue and I'm at a loss.
我查看了几个具有类似问题的线程,但没有一个建议解决了我的问题,我不知所措。 I suspect the issue has something to do with how my initial state is set.
我怀疑这个问题与我的初始状态的设置方式有关。
I've attempted the following.我尝试了以下方法。
Cannot read property 'map' of undefined REACT 无法读取未定义 REACT 的属性“地图”
This is my App.js where initial state is defined and passed to the search results component这是我的 App.js,其中定义了初始状态并将其传递给搜索结果组件
constructor(props) {
super(props);
this.state = {
searchResults: [
{
name:'test',
artist:'test',
album: 'test',
id:'2'
},
{
name:'test',
artist:'test',
album: 'test',
id:'2'
}
]
}
}
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;
This is where the SearchResults component passes props to TrackList这是 SearchResults 组件将 props 传递给 TrackList 的地方
class SearchResults extends React.Component {
render() {
return(
<div className="SearchResults">
<h2>Results</h2>
<TrackList tracks = {this.props.searchResults}/>
</div>
)
}
}
export default SearchResults;
This is where the error seems to be occurring.这是错误似乎发生的地方。
class TrackList extends React.Component {
render() {
return (
<div className="TrackList">
{this.state.tracks.map(track => <Track key={track.id}
track={track} />)}
</div>
);
}
}
export default TrackList;
Lastly the track class that should render a track最后是应该渲染轨道的轨道类
class Track extends React.Component {
render(){
return(
<div className="Track">
<div className="Track-information">
<h3>{this.props.track.name}</h3>
<p> {this.props.track.artist} | {this.props.track.album}</p>
</div>
<button className="Track-action">- + or - will go here --></button>
</div>
)
}
}
export default Track;
the output should be a rendered list of tracks, instead I get 'TypeError: Cannot read property 'map' of undefined.输出应该是呈现的曲目列表,而不是我得到“类型错误:无法读取未定义的属性“地图”。
TypeError: Cannot read property 'map' of undefined TrackList.render src/components/TrackList/TrackList.js:11 8 |
类型错误:无法读取未定义的 TrackList.render src/components/TrackList/TrackList.js:11 8 | 的属性“地图” class TrackList extends React.Component { 9 |
class TrackList 扩展 React.Component { 9 | render() { 10 |
渲染(){ 10 | return ( 11 | 12 | {this.props.tracks.map(track => )} 14 |
返回 ( 11 | 12 | {this.props.tracks.map(track => )} 14 |
Comment out the TrackList component from the PlayList render() method and it should work.从 PlayList render() 方法注释掉 TrackList 组件,它应该可以工作。
I am doing this same course from codecademy.我正在从 codecademy 做同样的课程。 The reason you still got the error is because in PlayList.js there is a TrackList component being rendered there but without any props.
您仍然收到错误的原因是因为在 PlayList.js 中有一个 TrackList 组件正在那里呈现,但没有任何道具。 So in the TrackList class, there is no props to map.
所以在 TrackList 类中,没有要映射的道具。
You are actually setting the property tracks
in the TrackList
component here:您实际上是在此处的
TrackList
组件中设置属性tracks
:
<TrackList tracks = {this.props.searchResults}/>
tracks
here is not a state, it is a property of the component (ie props
).此处的
tracks
不是状态,而是组件的属性(即props
)。
So you may want to change the following line:因此,您可能需要更改以下行:
{this.state.tracks.map(track => <Track key={track.id}
To:到:
{this.props.tracks.map(track => <Track key={track.id}
That should solve your problem.那应该可以解决您的问题。
Should be:应该:
{this.props.tracks.map(track => <Track key={track.id} track={track} />)}
change state
to props
将
state
更改为props
First console this.props.searchResults
on SearchResult Component then console this.props.tracks
in TrackList Component , then Replace首先控制台
this.props.searchResults
对信息搜索结果组件然后安慰this.props.tracks
在曲目列表组件,然后选择更换
{this.state.tracks.map(track => <Track key={track.id}
To到
{this.props.tracks && this.props.tracks.map(track => <Track key={track.id}
In your TrackList component, you should use this.props.tracks.map....
instead of this.state.tracks.map...
because you passed the data to this component as a value of tracks
prop.在你的曲目组成部分,你应该使用
this.props.tracks.map....
而不是this.state.tracks.map...
因为你传递的数据,这个组件的价值tracks
道具。
class TrackList extends React.Component {
render() {
return (
<div className="TrackList">
{this.props.tracks.map(track => <Track key={track.id}
track={track}
/>)}
</div>
);
}
}
export default TrackList;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.