TypeError：无法读取未定义的属性“地图”，同时尝试.map（）通过道具传递的数组

Question

我不确定为什么会收到 TypeError: Cannot read property 'map' of undefined here:

我正在尝试将数组从 App.js 向下传递到 => SearchResult.js 到 => TrackList.js

TrackList.js：

import React from 'react';
import Track from '../Track/Track'
import '../TrackList/TrackList.css';

class TrackList extends React.Component {
  render() {
    return (
      <div className="TrackList">
        {this.props.tracks.map(track => {
          console.log(track);
          <Track track={track} />}
        )}
      </div>
    );
  }
}

export default TrackList;

上面的console.log(track)按预期返回一个对象数组，我认为这可以确保this.props.tracks是一个数组。

App.js：

import React, { Component } from 'react';
import './App.css';
import SearchBar from './Components/SearchBar/SearchBar';
import SearchResults from './Components/SearchResults/SearchResults';
import Playlist from './Components/Playlist/Playlist';

const track = {
  name: "Tiny Dancer",
  artist: 'Elton John',
  album: 'Madman Across The Water'
};

const tracks = [track, track, track];

class App extends Component {
  constructor (props) {
    super(props);
    this.state = {'searchResults': tracks};
  }
  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.js：

import React from 'react';
import '../SearchResults/SearchResults.css';
import TrackList from '../TrackList/TrackList';


class SearchResults extends React.Component {
  render() {
    return (
      <div className="SearchResults">
        {/* {console.log(this.props.searchResults)} */}
        <h2>Results</h2>
        <TrackList tracks={this.props.searchResults}/>
      </div>
    );
  }
}

export default SearchResults;

我也尝试使用 props 从 App.js 传递数组（而不是状态），但我得到了同样的错误。

Answer 1

有时 react 会在你的 props 加载之前渲染应用。如果您从 api 调用中获取道具，则尤其会发生这种情况。如果发生这种情况，react 会抛出错误。这是一个解决方法：

import React from 'react';
import Track from '../Track/Track'
import '../TrackList/TrackList.css';

class TrackList extends React.Component {
    constructor(props){
        super(props)
        this.state={}
    }
  render() {
      //es6 syntax. this will allow the app to render and then replace the 
      //tracks variable with this.props.tracks when the props are ready
      //this check if this.props.tracks exist and if it doesn't it will 
      //assign the variable to an empty array. then .map will not be 
      //called on an undefined variable.  
      let tracks = this.props.tracks ? this.props.tracks : [];
    return (
      <div className="TrackList">
        {tracks.map(track => {
          console.log(track);
          <Track track={track} />}
        )}
      </div>
    );
  }
}

export default TrackList;