React中通过props正确传递的数组为何返回undefined？

问题原因 #

• 报错的核心是CardDescription组件接收的props.description为undefined，此时访问下标[0]就会触发该类型错误。
• 你贴出的CardItem调用示例确实传入了description数组，但只要项目中存在任意一处调用CardItem时没有传递该属性，就会触发这个报错。

修复方案 #

1. 增加兜底默认值，避免undefined的情况，同时优化数组渲染逻辑，不用写死下标：
   你可以直接给CardDescription组件加空数组兜底，同时用map遍历渲染所有数组项，匹配你原本要把数组每个字符串渲染为<li>的需求：

function CardDescription(props) {
  // 兜底为空数组，避免undefined报错
  const descriptionList = props.description ?? []
  return (
      <div>
          <ul>
              {/* 遍历渲染所有描述项，不用写死索引 */}
              {descriptionList.map((text, idx) => (
                <li key={idx}>{text}</li>
              ))}
          </ul>
      </div>
  )
}

export default CardDescription

也可以给CardItem设置默认props，从源头保证description一定是数组：

function CardItem(props) {
  // 原有逻辑保持不变
}

CardItem.defaultProps = {
  description: []
}

export default CardItem;

2. 可选：如果description是必填属性，可添加类型校验在开发阶段提前发现漏传问题：

import PropTypes from 'prop-types'

function CardItem(props) {
  // 原有逻辑保持不变
}

CardItem.propTypes = {
  description: PropTypes.arrayOf(PropTypes.string).isRequired,
  // 其他属性的校验也可以在这里补充
}

内容的提问来源于stack exchange，提问作者Kauan Abrahão