无法读取未定义的 react / js 的属性

Question

我正在学习 React 并将 props 从父级传递给子级等，我遇到了一个组件问题。在 React 开发工具中，道具通过链正确传递，但是当我在数组（硬编码）上使用 map() 方法时，它 returns 出现错误“无法读取未定义的属性”。道具在控制台中正确打印，因此我不明白这个错误是从哪里来的。

这是我做的：

我在 App 组件中创建了一个 State
状态传递给SearchResults => TrackList
最后一步应该是在 Tracklist 组件上使用 map 方法，并将 prop 的每个元素传递给 Track 组件 => 这就是错误所在

这里是 link 到 github 这里是 github link 我的文件，https://github.com/aspnet82/jamming

感谢您的帮助

Answer 1

问题出在您的 PlayList 组件上。您的 TrackList 组件期望 tracks 作为道具，而您没有将其传递给 PlayList 组件。

轨道列表组件

import React from "react";
import "./Tracklist.css";
import Track from '../Track/Track.js';

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

export default TrackList  ;

播放列表组件

import React from "react";
import "./Playlist.css";
import Tracklist from '../TrackList/Tracklist.js';

class Playlist extends React.Component {
  render() {
    return (
      <div className="Playlist">
        <input value="New Playlist" />
        <Tracklist tracks={ARRAY_OF_TRACKS} /> // Pass Array of tracks here. 
        <button className="Playlist-save">SAVE TO SPOTIFY</button>
      </div>
    );
  }
}

export default Playlist;

无法读取未定义的 react / js 的属性

Cannot read properties of undefined react / js

javascript

state

reactjs

react-props