javascript - 为什么通过 props 正确传递的数组返回未定义？

Question

我正在尝试加载 <li> 中字符串数组的每个字符串通过 props 传递此数组的 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 Prop 返回未定义。

另外，这个 TypeError 似乎只发生在 props.description 上。 Prop 。

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 安装时，即使您对值进行硬编码，它们似乎也不会在初始渲染时传递。因此，三元检查 Prop 是否包含 description 数组。

我现在猜这是为什么:

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