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

Question

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

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

我将这个初始 state 作为名为 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;

然后我使用将此道具传递给另一个名为 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 中，我想通过这个初始 state 数组 map 来渲染一个名为 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 ，你不能this.props.tracks 。

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

---

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

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

这是因为您的PlayList组件与SearchResults组件一样，也会呈现您的TrackList组件。 问题是您没有像使用SearchResults组件那样传递 state 并支持TrackList 。

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

应用程序.js

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

播放列表.js

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