React渲染嵌套对象时出现Cannot read property 'map' of undefined报错如何解决

这个报错本质是你调用map方法的变量值为undefined，代码里有两处调用map的逻辑，我们逐一排查解决：

1. 定位报错来源 #

你代码里存在两处map调用：

• artists.map(...)
• tracks[0].map(...)

你当前只做了!artists的非空判断，完全没有处理tracks的边界情况，90%以上的概率是tracks相关逻辑触发的报错：

• 父组件初始渲染时tracks还未完成接口请求，值为undefined
• tracks是空数组时，tracks[0]取值为undefined，调用map直接报错

2. 基础修复方案 #

第一步：给Props加默认值，提前拦截空值 #

组件参数先加默认值，避免父组件未传对应参数时报错：

const ArtistTracks = ({ artists = [], tracks = [] }) => {

第二步：补充tracks的非空判断 #

渲染曲目列表前先判断tracks[0]是否存在，再调用map：

{
  // 可选链写法，兼容ES2020+环境
  tracks[0]?.map((track, j) => {
    // 原有渲染逻辑不变
  })
}

如果你的项目不支持可选链语法，就改用逻辑与判断：

{
  tracks[0] && tracks[0].map((track, j) => {
    // 原有渲染逻辑不变
  })
}

3. 逻辑优化（推荐） #

你当前的代码逻辑是遍历所有艺术家，然后单独渲染第一组曲目，不符合「每个艺术家对应自己热门曲目」的需求，建议把曲目渲染逻辑放到艺术家遍历的回调里，对应下标取对应艺术家的曲目：

import React from 'react';
const ArtistTracks = ({ artists = [], tracks = [] }) => {
    if (!artists.length) return null;

    console.log('ArtistTracksComponenet', artists, tracks)

    return (
        <div>
            <p>Your Favourite Artists</p>
            {
                artists.map((artist, i) => {
                    // 加可选链避免items为空报错
                    const artistInfo = artist.items?.[0];
                    if (!artistInfo) return null;
                    const { images, name, followers, genres } = artistInfo;
                    // 取当前艺术家对应的曲目
                    const currentTracks = tracks[i] || [];

                    return (
                        <div key={i}>
                            <h3>{name}</h3>
                            <p>{followers.total} Followers</p>
                            <p>{genres.join(', ')}</p>
                            <img
                                src={images[0]?.url || ''}
                                alt='artist-profile'
                                style={{
                                    width: 200,
                                    height: 200,
                                    borderRadius: 100,
                                    objectFit: 'cover'
                                }}
                            />
                            {/* 渲染当前艺术家的对应曲目 */}
                            <div className="track-list">
                              {
                                currentTracks.map((track, j) => {
                                    const { name, album, preview_url } = track;

                                    return (
                                        <div
                                            key={j}
                                            className='track'
                                        >
                                            <img
                                                src={album.images[0]?.url}
                                                alt='trackImage'
                                                className='track-image'
                                            />
                                            <p className='track-text'>{name}</p>
                                        </div>
                                    )
                                })
                              }
                            </div>
                        </div>
                    )
                })
            }
        </div>
    )
}

export default ArtistTracks;

如果需要保留所有曲目统一在底部渲染的逻辑，也可以先把嵌套的tracks扁平化后再遍历：

{
  tracks.flat().map((track, j) => {
    // 原有曲目渲染逻辑
  })
}

额外边界问题修复 #

• 直接取artist.items[0]如果遇到artist.items是空数组也会触发取值报错，建议统一加可选链?.判断
• 所有图片路径取值统一加可选链，避免空数组取值报错

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