javascript - 如何在 ReactJS 的 map 函数中控制空值

Question

事实证明，我遇到了一个我觉得很奇怪的小问题，无法使用 OR 运算符 (||) 解决。

在下面的代码中，你可以看到我正在发送一个

 return (
      <div>
        {listShow.map(i => (
          <Link to={`/noticias/detalle/${i.categoria.id/${i.id}`} key={i.id}>
            <h3>{i.titulo}</h3>
            <img
              alt={i.titulo}
              src={process.env.REACT_APP_IMG_BASE + i.imagen_intro}
              width={500}
            />
          </Link>
        ))}
    );

但是，在某些时候，"i.categoria.id" 变为 null，这会产生一个错误:

"TypeError: Can not read property 'id' of null"

然后，我尝试了这个:

 return (
      <div>
        {listShow.map(i => (
          <Link to={`/noticias/detalle/${i.categoria.id/${i.id} || 'WithoutCat'`} key={i.id}>
            <h3>{i.titulo}</h3>
            <img
              alt={i.titulo}
              src={process.env.REACT_APP_IMG_BASE + i.imagen_intro}
              width={500}
            />
          </Link>
        ))}
    );

我想知道如何解决这个问题，因为在我放置运算符时取值对我来说似乎很奇怪 ||

谢谢!

Answer 1

Categoria 为 null 并且您正在尝试访问它的属性，请先检查它是否为 null，然后试试这个:

<Link to={i.categoria && i.categoria.id ? `/noticias/detalle/${i.categoria.id}/${i.id}` : 'WithoutCat'} key={i.id}>

希望对您有所帮助! :)