为什么通过 props 正确传递的数组返回 undefined？

Question

我正在尝试通过 props 传递该数组来加载 <li> html 标记中的字符串数组的每个字符串：

<CardItem
  src='https://static.news...koinex-banner.png'
  text='my text'
  label='Adventure'
  path='/products'
  description={["someText1", "someText2", "someText3", "someText4"]}
/>

function CardItem(props) {
  return (
    <>
      <li className='cards__item'>
        <Link className='cards__item__link' to={props.path}>
          <figure className='cards__item__pic-wrap' data-category={props.label}>
            <img
              className='cards__item__img'
              alt='Travel Image'
              src={props.src}
            />
          </figure>
          <div className='cards__item__info'>
            <h5 className='cards__item__text'>{props.text}</h5>
          </div>
          <CardDescription description={props.description} />
        </Link>
      </li>
    </>
  );
}

export default CardItem;

function CardDescription(props) {
  return (
      <div>
          <ul>
              <li>{props.description[0]} </li>
          </ul>
      </div>
  )
}

export default CardDescription

我得到了

TypeError: Cannot read properties of undefined (reading '0')

我不确定为什么 props.description 属性返回 undefined。

此外，这个 TypeError 似乎只发生在 props.description 属性上。

Answer 1

您的代码将CardDescrition 拼错为CardDescription

试试：

{props.description ? <CardDescription description={props.description} /> : ''}

并在描述中：

function CardDescription(props) {
    return (
        <div>
            <ul>
                {props.description.map(des => <li>des</li>)}
            </ul>
        </div>
    )
}

请找到我创建的最小仓库：

https://github.com/snake-py/so-help-react-card

解释：

我试图根据我的理解解释那里发生的事情。

当 Carditems 挂载时，即使您对值进行硬编码，它们似乎也不会在初始渲染时传递。因此，三元检查 props 是否包含 description 数组。

我现在猜为什么会这样：

可能是因为它们位于Link 的包装组件中。如果您删除 Link 组件，代码应该可以在没有初始检查的情况下工作。

Answer 2

好吧，这可能是因为在安装这三个过程中，描述道具可能未定义，您可以通过执行此操作来避免此错误props?.description[0]，如果您想在 CardDescrition 组件内呈现数组中的所有值，您可以这样做

   props?.description.map((item) => (<li>{item}</li>))