javascript - 您好，在理解 TypeERROR 时遇到了一点问题：“无法读取未定义的属性 'map'”

Question

我正在尝试使用 Spotify 开发人员工具和 Api 制作一个播放列表项目。在 TrackList.js 中，我收到一个 TypeERROR“无法读取未定义的属性 'map'。你能帮我理解错误吗？

import React from 'react';

import './TrackList.css';

import Track from '../Track/Track';

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


export default TrackList;

标签： javascriptreactjs

Answer 1

的价值

this.props.tracks

可能不是数组，请尝试以下代码仅在值为数组时渲染组件。

import React from "react";

import "./TrackList.css";

import Track from "../Track/Track";

class TrackList extends React.Component {
  render() {
    const { tracks } = this.props;
    return (
      <div class="TrackList">
        {Array.isArray(tracks) &&
          tracks.map(track => {
            return (
              <Track
                track={track}
                key={track.id}
                onAdd={this.props.onAdd}
                onRemove={this.props.onRemove}
                isRemoval={this.props.isRemoval}
              />
            );
          })}
      </div>
    );
  }
}

export default TrackList;