React父传子对象数组执行map时报TypeError问题求助

开发React应用时，尝试对父组件传递的对象数组执行map操作，出现错误：TypeError: Cannot read properties of undefined (reading 'map')。该数组在定义文件内可正常使用map，也能通过JSON.stringify正常输出，但作为props从父组件传入子组件时无法执行map操作。

相关代码示例 #

定义的数组示例：

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

App组件：

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>
  );
};

export default App;

SearchResults和TrackList组件：

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;

报错触发点为TrackList组件内的props.tracks.map。

解决方向 #

• 给props设置默认值：在子组件接收props时，为tracks设置默认空数组，避免未传入或初始值为undefined的情况。修改TrackList组件：

  const TrackList = ({ tracks = [], ...props }) => {
    // 后续逻辑不变
  };
  

  或者使用可选链操作符直接在map前做判断：

  {props.tracks?.map((item) => (...))}
  

• 校验props传递链路：在TrackList组件内添加console.log，确认渲染时props.tracks的实际值：

  const TrackList = (props) => {
    console.log('TrackList tracks:', props.tracks);
    // 后续逻辑
  };
  

  查看控制台输出，确认是否在初始渲染时props.tracks为undefined。

• 处理异步或条件渲染场景：如果后续该数组会通过异步请求获取，父组件需给mockData1设置初始空数组，避免初始渲染时传递undefined；或者在子组件内添加加载状态判断：

  {props.tracks ? props.tracks.map(...) : <div>加载中...</div>}
  

• 检查组件渲染时机：确认TrackList组件是否存在提前渲染的情况（比如条件渲染的边界场景），导致props未及时传递到位。

内容的提问来源于stack exchange，提问作者Richie