React 中的 TypeError，傳遞道具

Question

盡管應用程序編譯成功，但我在瀏覽器中收到“TypeError: undefined is not an object (evaluating 'this.props.tracks.map')”。

我用 console.log 檢查了 SearchResults 和 TrackList 都接收道具（console.log 在 map() 方法中打印數組的所有元素）所以我不明白為什么對象是未定義的。

代碼如下：

文件 App.js

import React from 'react';
import SearchResults from '../SearchResults/SearchResults.js'

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      searchResults: [{name: '1'}, {name: '2'}]
    }
  }

  render() {
    return (
      <div>
        <div class="App">
          <div className="App-playlist">
            <SearchResults searchResults={this.state.searchResults} />
          </div>
        </div>
      </div>
    )
  }
}

export default App;

文件 SearchResults.js

import React from 'react';
import TrackList from '../TrackList/TrackList.js'

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

export default SearchResults;

文件 TrackList.js

import React from 'react';
import Track from '../Track/Track.js'

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

export default TrackList;

更新

我還添加了來自瀏覽器的錯誤：

Answer 1

不確定為什么會發生這種情況，但是當控制台在Tracklist記錄this.props.tracks ，它是已定義的，從SearchResults傳遞的數組然后變為undefined ，從而導致您看到的錯誤。

快速修復使用保護模式

class TrackList extends React.Component {
  render() {
    const { tracks } = this.props;
    console.log(tracks); // two logs, first (2)[{...}, {...}], then undefined
    return (
      <div className="TrackList">
        {
          tracks && tracks.map((track, index) => { // Use a guard here to handle undefined tracks prop
            return <Track key={index} track={track} />
          })
        }
      </div>
    )
  }
}

在上面的代碼片段中，您可以簡單地在tracks道具上放置一個防護裝置，以防止映射的未定義值。 更重要的問題是為什么會發生這種情況，因為在SearchResult prop 從來沒有未定義：

class SearchResults extends React.Component {
  render() {
    console.log('SearchResults', this.props.searchResults); // defined, only see 1 log entry
    return (
      <div className="SearchResults">
        <h2>Results</h2>
        <TrackList tracks={this.props.searchResults} />
      </div>
    )
  }
}

進一步的調查

我查看了您的其余代碼，發現App正在呈現PlayList ，而PlayList也呈現了一個TrackList但這次沒有通過任何曲目！

class Playlist extends React.Component {
  render() {
    return (
      <div className="Playlist">
        <input defaultValue={'New Playlist'} />
        <TrackList /> // tracks becomes undefined here
        <button className="Playlist-save">SAVE TO SPOTIFY</button>
      </div>
    )
  }
}

解決方案定義道具/默認道具

在這一點上，我建議使用 react prop-types包來定義組件的 props 並在某些情況下提供默認值。 您的TrackList組件變為：

import React from 'react';
import PropTypes from 'prop-types'; // import proptypes
import Track from '../Track/Track.js'
import './TrackList.css'

const propTypes = {
  tracks: PropTypes.array // If you make this required (i.e. PropTypes.array.isRequired) then you'll get a react warning about missing props
};

const defaultProps = {
  tracks: [], // if tracks props is unspecified this value is used
};

class TrackList extends React.Component {
  render() {
    const { tracks } = this.props;
    console.log(tracks);
    return (
      <div className="TrackList">
        {
          tracks.map((track, index) => { // no longer need guard
            return <Track key={index} track={track} />
          })
        }
      </div>
    )
  }
}

TrackList.propTypes = propTypes;

TrackList.defaultProps = defaultProps;

export default TrackList;