React调用map或读数组长度报Cannot read properties of undefined错误如何解决

报错原因 #

你接口返回的数组中存在部分项没有comments字段，比如id为6、id为11的条目，直接访问elementApi.comments.map或者elementApi.comments.length时，comments是undefined，就会触发你遇到的报错。
如果是真实异步请求接口的场景，还要额外考虑初始state为空、接口还未返回数据时的渲染兜底。

解决方法 #

有几种简单的方案可以解决：

• 方案1：使用可选链+默认值兜底（推荐）
  调用数组方法或者读取长度前，用?.可选链运算符判断字段是否存在，配合空数组/0做兜底：
  • 渲染评论时写为 elementApi.comments?.map(...)
  • 读取评论长度时写为 elementApi.comments?.length || 0
• 方案2：提前给字段赋默认空数组
  访问前先处理字段，确保拿到的一定是数组：

const comments = elementApi.comments ?? []
// 之后直接用 comments.map 或者 comments.length 即可

• 方案3：条件渲染
  只有comments存在时才渲染对应内容：

{elementApi.comments && elementApi.comments.map(...)}

修复后的完整组件代码 #

import { useState } from 'react'

const myArrayApi = [/* 你的接口返回数据，此处省略 */]

const MyArrayFromApi = () => {
    // 初始值设为空数组，避免异步请求还没返回时调用map报错
    const [arrayApi, setArrayApi] = useState(myArrayApi);

    return (
        <div>
            {arrayApi.map((elementApi => {
                // 先给comments赋默认空数组
                const comments = elementApi.comments ?? []
                return (
                    <div key={elementApi.id}>
                        <div>
                            <h1>{elementApi.title}</h1>
                            <p>{elementApi.category}</p>
                            <p>点赞数：{elementApi.upvotes}</p>
                            <p>{elementApi.description}</p>
                            {/* 读取评论长度示例 */}
                            <p>评论数：{comments.length}</p>
                        </div>
                        {/* 渲染评论列表 */}
                        {comments.map((elementComments => {
                            return (
                                <div key={elementComments.id}><p>{elementComments.content}</p></div>
                            )
                        }))}
                    </div>
                )
            }))}
        </div>
    )
}

export { MyArrayFromApi }

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