在我的反应应用程序上使用 map() 方法时遇到一些问题

Question

在我的应用程序中，我在组件 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;

我将这个初始状态作为一个名为 searchResults 的 prop 传递给另一个名为 .

的组件

这里是 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;

然后我将这个道具传递给另一个名为 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;

在 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;

但是有问题！！我不断收到此错误：

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

---

这里是 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;

在此处链接到在沙盒上存在相同错误的项目 https://codesandbox.io/s/upbeat-dawn-lwbxb?fontsize=14&hidenavigation=1&theme=dark

Answer 1

将您的 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>
    );
  }
}

如果this.props.tracks 是undefined，则无法映射。

&&（AND 运算符）是在 React 中有条件地渲染的简洁方法。你可以把它想象成一个简单的 if 语句：如果左边的表达式为真，则执行 x。

---

我还将详细说明为什么 this.props.tracks 在您的案例中未定义。

发生此问题的原因是您的Playlist 组件。如果您从 App 取消注释此组件，您会注意到您的原始代码可以工作。

这是因为你的PlayList 组件，就像你的SearchResults 组件一样，也会渲染你的TrackList 组件。问题是您没有像使用 SearchResults 组件那样将状态和道具传递给 TrackList。

因此，另一种解决方案是将您的状态和道具从 PlayList 传递到 TrackList：

App.js

// ...
<SearchResults searchResults={this.state.searchResults} />
<Playlist searchResults={this.state.searchResults}/>
// ...

播放列表.js

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