Javascript .map在对象数组上未定义

我将对象数组作为道具从App.js->searchResult->TrackList.js传递。但当我在对象数组上应用.map函数时，它显示无法读取未定义的属性“map”。我尝试过不同的方法来解决这个问题，但没有一种有效。在控制台中，我得到了道具的值。我的TRackList.js组件在一次运行中渲染了四次。这是密码

App.js

 this.state = {
      searchResults: [
        {
          id: 1,
          name: "ritik",
          artist: "melilow"
        },
        {
          id: 2,
          name: "par",
          artist: "ron"
        },
        {
          id: 3,
          name: "make",
          artist: "zay z"
        }
      ]

return ( <SearchResults searchResults={this.state.searchResults} /> )

此.state={
搜索结果：[
{
id:1，
名称：“ritik”，
艺术家：“草木犀”
},
{
id:2，
名称：“标准杆”，
艺术家：“罗恩”
},
{
id:3，
名称：“制造”，
艺术家：“扎伊z”
}
]
返回（）

在Searchresult.js中

在TrackList.js中

import React from "react";
import Track from "./Track";
export default class TrackList extends React.Component {
  constructor(props) {
    super();
  }
  render() {
 console.log("here",  this.props.tracked);
    return (
      <div>
        <div className="TrackList">
          {this.props.tracked.map(track => {
            return (<Track track={track} key={track.id} />);
          })}
        </div>
      </div>
    );
  }
}

从“React”导入React；
从“/Track”导入曲目；
导出默认类TrackList扩展React.Component{
建造师（道具）{
超级（）；
}
render（）{
log（“这里”，this.props.tracked）；
返回(
{this.props.tracked.map（track=>{
返回（）；
})}
);
}
}

---

这是完整的代码--

在循环之前，您需要检查this.props.tracked.map是否存在

解决方案沙盒链接：

从“React”导入React；
从“/Track”导入曲目；
从“道具类型”导入道具类型；
导出默认类TrackList扩展React.Component{
建造师（道具）{
超级（）；
}
render（）{
console.log（“此处”，this.props.tracked的类型）；
返回(
{this.props.tracked&&this.props.tracked.map（track=>{
返回；
})} 
);
}
}
TrackList.propTypes={
跟踪：PropTypes.arrayOf（PropTypes.shape({
名称：PropTypes.string，
艺术家：PropTypes.string，
}))
};

您加载了组件

跟踪列表两次。有一次没有传递属性，这就是为什么它首先在控制台中设置，然后看起来像是未设置的，但这只是第二个日志。我已更新了您的代码。请看这里
在实现映射函数之前，您需要检查这个.props.tracked值

您只需使用this.props.tracked&跟随您的代码进行检查。
您应该将
searchResults={this.state.searchResults}
添加到您的
app.js
播放列表中，使用道具将其放入播放列表中，然后从播放列表中将其设置到TrackList中（
tracked={props.searchResults}
）

而且，打字脚本帮助我避免犯这样的错误。
另外，将一个键道具添加到您在
map
函数中返回的组件中。
同样适用于这里，在他的情况下，该值未作为属性传递，因此这将修复错误，但不会修复其未定义的原因：）@Julian Yes，同意。我使用PropTypes检查更新解决方案。问题是您已呈现
轨迹列表
播放列表中的
组件
未通过
跟踪的组件
道具。从
播放列表
组件中删除
跟踪列表
组件，或者将数组作为
跟踪的
道具传递给
跟踪列表
组件。如果不想通过h在
App
组件状态中定义
import React from "react";
import Track from "./Track";
import PropTypes from 'prop-types';

export default class TrackList extends React.Component {
  constructor(props) {
    super();
  }
  render() {
    console.log("here", typeof this.props.tracked);
    return (
      <div>
        <div className="TrackList">
           {this.props.tracked && this.props.tracked.map(track => {
            return <Track track={track} key={track.id} />;
          })} 
        </div>
      </div>
    );
  }
}

TrackList.propTypes = {
  tracked: PropTypes.arrayOf(PropTypes.shape({
    name: PropTypes.string,
    artist: PropTypes.string,
  }))
};