如何在ReactJ中的MAP函数中控制零值

Question

事实证明，我有一个很小的问题，我发现我很奇怪，而不是用或操作员解决的问题（||）。

在以下代码中，您可以看到我正在发送

 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：无法读取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>
        ))}
    );

我想知道如何解决这个问题，因为对我来说，当我放置操作员时，我会拿到价值||

谢谢！

Answer 1

cancoria为null，您正在尝试访问其属性，请先检查一下，如果是null，请尝试以下操作：

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

希望它有帮助！：）