TypeError：尝试读取通过props传递的数组时，无法读取未定义的属性“ map”

Question

我不确定为什么会收到TypeError：无法在此处读取未定义的属性“ map”：

我试图将数组从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;

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

Answer 1

有时反应会在您的道具加载之前渲染应用。 如果您通过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;