Javascript 在react应用程序上使用map（）方法时遇到问题

在我的应用程序中，我在组件app.js中有一个初始状态，它是一个对象数组

下面是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;

import React，{Component}来自'React'；
导入“/App.css”；
从'@testing library/react'导入{render}；
//导入旧组件
从“../SearchBar/SearchBar”导入搜索栏；
从“../Playlist/Playlist”导入播放列表；
从“../SearchResults/SearchResults”导入搜索结果；
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
搜索结果：[{name:'name1'，artist1'，album:'album1'，id:1}，
{姓名：'name2'，艺术家：'artist2'，专辑：'album2'，id:2}]
};
}
//将JSX添加到应用程序组件
render（）{
返回(
詹姆明
);
}
}
导出默认应用程序；

我将这个初始状态作为一个名为searchResults的道具传递给另一个名为searchResults的组件

以下是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;

import./SearchResults.css'；
从“../TrackList/TrackList”导入TrackList；
类SearchResults扩展了React.Component{
render（）{
返回(
结果
);
}
}
导出默认搜索结果；

然后我将这个道具传递给另一个名为TrackList的组件

下面是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;

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

在Track.js中，我想映射这个初始状态数组来渲染一个名为Track的组件

下面是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;

从“React”导入React；
导入“/Track.css”；
类跟踪扩展了React.Component{
渲染（）{
如果（此.props.isRemoval）{
返回-；
}否则{
返回+；
}
};
render（）{
返回(
{this.props.track.name}
{this.props.track.artist}{this.props.track.album}

{this.renderAction}
);
}
}
导出默认轨迹；

但是有点不对劲！！我不断地发现这个错误：

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

---

以下是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;

从“React”导入React；
导入“/SearchBar.css”；
类SearchBar扩展了React.Component{
render（）{
返回(
搜寻
);
}
}
导出默认搜索栏；

此处链接到沙盒上出现相同错误的项目

---

将您的

轨迹列表

组件更改为：

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

PlayList.js

// ...
<TrackList tracks={this.props.searchResults}/>
// ...

/。。。
// ...

错误发生在哪个组件中？如果您可以在codesandbox之类的组件上创建应用程序，它将是better@AhmedEldawody您需要创建一个可复制的示例，以便我们帮助您@moufed在他的沙箱中为您修复了一个错误，但是

map

错误是不可复制的。您还可以分享您的播放列表组件吗？@prabhu我在问题中添加了一个沙盒链接，希望任何人都能提供帮助..：（是的，它能工作..但我不明白为什么！！！你能解释一下问题出在哪里以及你为什么使用这个部件（this.props.tracks&&）？？非常感谢：）@Ahmedawody

&&

检查

props.tracks

是否未定义或为空，这叫短路evaluation@AhmedEldawody我已经更新了我的答案，并解释了在你的案例中这个.props.tracks未定义的原因。你帮了我很多，感谢你宝贵的时间和解释。真的，你是一个很棒的人

// ...
<TrackList tracks={this.props.searchResults}/>
// ...