[英]Having some problem on using map() method on my react application
In my app i have an initial state in a component App.js it's an array of objects在我的应用程序中,我在组件 App.js 中有一个初始 state 它是一个对象数组
Here is App.js code:这是 App.js 代码:
import React, { Component } from 'react';
import './App.css';
import { render } from '@testing-library/react';
// Import Used Components
import SearchBar from '../SearchBar/SearchBar';
import Playlist from '../PlayList/PlayList';
import SearchResults from '../SearchResults/SearchResults';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
searchResults: [{name: 'name1',artist: 'artist1',album: 'album1',id: 1},
{name: 'name2',artist: 'artist2',album: 'album2',id: 2}]
};
}
// Adding JSX to App Component
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;
I passed this initial state as a prop called searchResults to another component named.我将这个初始 state 作为名为 searchResults 的道具传递给另一个名为的组件。
Here is searchResults.js code:这是 searchResults.js 代码:
import './SearchResults.css';
import TrackList from '../TrackList/TrackList';
class SearchResults extends React.Component {
render() {
return (
<div className="SearchResults">
<h2>Results</h2>
<TrackList tracks={this.props.searchResults}/>
</div>
);
}
}
export default SearchResults;
then I used passed this prop to another component called TrackList然后我使用将此道具传递给另一个名为 TrackList 的组件
here is TrackList.js code:这是 TrackList.js 代码:
import React from 'react';
import './TrackList.css';
import Track from '../Track/Track';
class TrackList extends React.Component {
render() {
return(
<div className="TrackList">
{
this.props.tracks.map(track => {
return <Track track={track} key={track.id} />;
} )
}
</div>
);
}
}
export default TrackList;
In Track.js I want to map through this initial state array to render a component called Track在 Track.js 中,我想通过这个初始 state 数组 map 来渲染一个名为 Track 的组件
here is the Track.js code:这是 Track.js 代码:
import React from 'react';
import './Track.css';
class Track extends React.Component {
renderAction() {
if (this.props.isRemoval){
return <botton className='Track-action'>-</botton>;
} else {
return <botton className='Track-action'>+</botton>;
}
};
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">{this.renderAction}</button>
</div>
);
}
}
export default Track;
But something is wrong:!但有些不对劲:! I keep getting this error:
我不断收到此错误:
TypeError: Cannot read property 'map' of undefined TypeError:无法读取未定义的属性“地图”
Here is searchBar.js component code:这是 searchBar.js 组件代码:
import React from 'react';
import './SearchBar.css';
class SearchBar extends React.Component {
render() {
return (
<div className="SearchBar">
<input placeholder="Enter A Song, Album, or Artist" />
<button className="SearchButton">SEARCH</button>
</div>
);
}
}
export default SearchBar;
HERE LINK TO THE PROJECT WITH THE SAME ERROR ON SANDBOX https://codesandbox.io/s/upbeat-dawn-lwbxb?fontsize=14&hidenavigation=1&theme=dark此处链接到在沙盒 https 上存在相同错误的项目://codesandbox.io/s/upbeat-dawn-lwbxb?fontsize=14&hidenavigation=1&theme=dark
Change your TrackList
component to this:将您的
TrackList
组件更改为:
class TrackList extends React.Component {
render() {
return (
<div className="TrackList">
{this.props.tracks && this.props.tracks.map(track => {
return <Track key={track.id} track={track}/>
})}
</div>
);
}
}
You can't map through this.props.tracks
if it is undefined
.如果 this.props.tracks 是
undefined
,你不能this.props.tracks
。
The &&
(AND operator) is a concise way to conditionally render in React. &&
(AND 运算符)是在 React 中有条件地渲染的一种简洁方式。 You can think of it like a simple if statement: If the expression on the left is true, then do x.你可以把它想象成一个简单的 if 语句:如果左边的表达式为真,则执行 x。
I'll also expand on why the this.props.tracks
was undefined in a certain instance in your case.在您的案例中,我还将详细说明为什么
this.props.tracks
在某个实例中未定义。
The reason that this problem is happening is your Playlist
component.发生此问题的原因是您的
Playlist
组件。 If you uncomment this component from your App
you will notice your original code will work.如果您从您的
App
中取消注释此组件,您会注意到您的原始代码将起作用。
This is because your PlayList
component, like your SearchResults
component, also renders your TrackList
component.这是因为您的
PlayList
组件与SearchResults
组件一样,也会呈现您的TrackList
组件。 The problem is you haven't passed your state and props down to TrackList
like you did with your SearchResults
component.问题是您没有像使用
SearchResults
组件那样传递 state 并支持TrackList
。
So an alternative solution would be to pass your state and props down from PlayList
to TrackList
:因此,另一种解决方案是将您的 state 和道具从
PlayList
传递到TrackList
:
App.js应用程序.js
// ...
<SearchResults searchResults={this.state.searchResults} />
<Playlist searchResults={this.state.searchResults}/>
// ...
PlayList.js播放列表.js
// ...
<TrackList tracks={this.props.searchResults}/>
// ...
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.