无法读取未定义的反应/ js的属性答案

【问题标题】：Cannot read properties of undefined react / js无法读取未定义的反应/ js的属性
【发布时间】：2021-11-20 18:41:20
【问题描述】：

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

这就是我所做的：

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

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

感谢您的帮助

【问题讨论】：

标签： javascript reactjs state react-props

【解决方案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;

【讨论】：

不确定这是正确的答案。我将 tha 数组从 SearchResults 传递给 TrackList。如果您查看控制台，您会看到 APp 组件中的状态，然后 props 下降 APP => SearchResults => TrackList => Track
您正在渲染 PlayList 中的 TrackList。我在那里找不到轨道道具。我会详细研究这个项目。给我一分钟。
是的，但是如果您看一下，您会看到 TrackList 在两者中都呈现，我只是在搜索结果路径上工作，而不是播放列表。无论如何，感谢您抽出宝贵的时间！ :)
我现在明白你的意思了！谢谢你。
酷！很高兴这可以帮助你。