ReactJS中map函数内null值处理：||运算符失效求助

这个问题我之前也踩过坑！你当前的||写法之所以没用，是因为错误发生在||生效之前——当i.categoria为null时，你先尝试访问i.categoria.id，这一步直接触发了TypeError，||根本没机会执行判断。另外还要提醒你：模板字符串里的i.categoria.id/${i.id}写法有问题，这里的/会被当成除法运算符，不是路径分隔符，得把它移到模板字符串的变量外面！

下面给你几个靠谱的解决方案：

1. 用可选链运算符（最推荐） #

ES2020引入的可选链?.可以完美解决这个问题，它会在访问属性前先判断对象是否存在，不存在就返回undefined，不会抛出错误。结合||给默认值，代码会非常简洁：

return (
  <div>
    {listShow.map(i => (
      <Link 
        to={`/noticias/detalle/${i.categoria?.id || 'WithoutCat'}/${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>
    ))}
  </div>
);

2. 三元运算符做前置判断 #

如果你的项目还没配置支持可选链（现在大部分React项目都支持了），可以用三元运算符先判断i.categoria是否存在：

return (
  <div>
    {listShow.map(i => (
      <Link 
        to={`/noticias/detalle/${i.categoria ? i.categoria.id : 'WithoutCat'}/${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>
    ))}
  </div>
);

3. 提前解构并设置默认值 #

你也可以在map内部先解构数据，给categoria设置默认对象，这样后续访问属性就不会出错了：

return (
  <div>
    {listShow.map(i => {
      // 解构时给categoria设置默认值
      const { 
        categoria = { id: 'WithoutCat' }, 
        id, 
        titulo, 
        imagen_intro 
      } = i;
      return (
        <Link 
          to={`/noticias/detalle/${categoria.id}/${id}`} 
          key={id}
        >
          <h3>{titulo}</h3>
          <img 
            alt={titulo} 
            src={`${process.env.REACT_APP_IMG_BASE}${imagen_intro}`} 
            width={500} 
          />
        </Link>
      )
    })}
  </div>
);

另外补充一下：src={process.env.REACT_APP_IMG_BASE + i.imagen_intro}改成模板字符串写法会更清晰，避免字符串拼接时的空格或路径问题。

内容的提问来源于stack exchange，提问作者Mangux