在 React 应用上需要一些帮助。我正在尝试映射从父级传递下来的对象数组，但出现错误：

TypeError：无法读取未定义的属性（读取“map”）

我可以按如下方式 JSON.stringify，并且如果它在同一文件中定义，我可以映射相同的数组。只是不能映射为从父级发送的 prop。

有人可以指出我如何在从父级发送的子组件中映射如下所示的数组的正确方向吗？

const tracks = [
  {
  id: 1,
  name: "Song 1",
  artist: "Artist 1",
  album: "Album 1"
  },
    {
  id: 2,
  name: "Song 2",
  artist: "Artist 2",
  album: "Album 2"
  },
];

const App = () => {
  
  const mockData = "Song 1";
  

  const mockData1 = [
    {
    id: 1,
    name: "Song 1",
    artist: "Artist 1",
    album: "Album 1"
    },
    {
    id: 2,
    name: "Song 2",
    artist: "Artist 2",
    album: "Album 2"
    },
  ];

  return (
    <div>
      <h1>
        Ja<span className="highlight">mmm</span>ing
      </h1>
      <div className="App">
        <SearchBar />
      < div className="App-playlist">
          <SearchResults 
            mockData={mockData}
            mockData1={mockData1}
            appObject={{
              id: 1,
              name: "Song 1",
              album: "Album 1",
              artist: "Artist 1"
            }}
  
          
          />
          <Playlist />
          <>
          {mockData1.map((item) => (
           <div key={item.id}>
              <div>{item.name}</div>
              <div>{item.album}</div>
              <div>{item.artist}</div>
            </div>
          ))}
          </>
        </div>
      </div>
    </div>
  );
};

导出默认应用程序；

const SearchResults = (props) => {
  return (
    <div className="SearchResults">
      <h2>Results</h2>
      <TrackList 
        mockData={props.mockData} 
        appObject={props.appObject}
        tracks={props.mockData1} 
           
        />
    </div>
  );
};

export default SearchResults;

const TrackList = (props) => {
    return (
      <div className="TrackList">
          <Track              
            mockData={props.mockData} 
            appObject={props.appObject}                                
          />
          <p>
            {JSON.stringify(props.tracks)}  
          </p>
          {props.tracks.map((item) => (
            <div key={item.id}>
              <div>{item.name}</div>
              <div>{item.album}</div>
              <div>{item.artist}</div>
            </div>
          ))}

      </div>
    );
  };
  
  export default TrackList;

props.tracks.map - 导致问题