时间戳

首页 > 解决方案 > 无法读取未定义的反应/ js的属性

javascript - 无法读取未定义的反应/ js的属性

问题描述

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

这就是我所做的：

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

谢谢你的帮助

标签： javascriptreactjsstatereact-props

解决方案

问题出在您的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;

推荐阅读