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

结果是我遇到了一个很奇怪的小问题，这个问题没有用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>
        ))}
    );

返回(
{listShow.map（i=>(
{i.titulo}
))}
);

但是，在某个时刻，“i.categoria.id”变为null，这会生成一个错误，该错误表示：

“TypeError:无法读取null的属性'id'”

然后，我试了一下：

 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>
        ))}
    );

返回(
{listShow.map（i=>(
{i.titulo}
))}
);

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

---

谢谢大家!

Categoria为null，并且您正在尝试访问它的属性，请先检查它是否为null，然后尝试以下操作：

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

---

希望有帮助！：）

非常感谢，它工作得很好！如果其他人有同样的问题，我会给你最好的答案：）我很高兴，很高兴它能帮上忙：）请注意，如果

categoria.id

未定义，并且您将“WithoutCat”设置为备用选项，您可能最终会遇到死链接。