在使用 map 循环遍历数组时返回 null 而不是 JSX

Posted 2023-02-22

【中文标题】在使用 map 循环遍历数组时返回 null 而不是 JSX

【英文标题】：Returning null instead of a JSX when looping through arrays in react using map

【发布时间】：2020-11-15 04:58:54

【问题描述】：

我正在使用array.map 循环遍历一组对象。数组采用以下形式：

const seasons = [
             air_date: null, episode_count: 6,
             air_date: "2020-02-02", episode_count: 6
           ]

我正在使用seasons.map 遍历数组，如果air_date 不是null 则返回JSX，否则返回null。

 seasons.map((season, index) => 
      if(season.air_date)
         return <span key = season.id> season.episode_count </span>
     else
        return null; // Is this recommended?
      
)

我从未见过有人这样做（返回 null 而不是 JSX）。在反应中推荐吗？我不想使用for 循环。

【问题讨论】：

你怎么没看到？这是在 jsx 中映射数组最常用的方式。

我曾经见过map 被用来循环遍历数组。我从未见过的是 null 被退回而不是 JSX。

因为还有其他选择。可能这就是为什么你看不到这样的东西。例如，对于您的需要，逻辑 && 是必需的。你甚至不需要像这样使用if/else 语句。

【参考方案1】：

这很好，但在 React 中更常见的是使用三元运算符：

seasons.map((season, index) =>
  season.air_date ? <span key=season.id> season.episode_count </span> : null
);

就像下面评论中提到的@devserkan，你甚至可以这样做：

seasons.map((season, index) =>
  season.air_date && <span key=season.id> season.episode_count </span>
);

【讨论】：

这里甚至不需要ternary。 && 也可以正常工作。

true 我在评论中添加了您的建议。

感谢您的反馈。我知道&& 和ternary 运算符。我选择if else 是因为JSX 的很多行我要返回。与&& 和ternary 运算符相比，在这种情况下使用if else 使代码更具可读性。该示例是我尝试做的简化版本。

不，我不是这个意思，跨度应该只在 season.air_date 不为空时渲染

【参考方案2】：

是的，这是推荐的。

如果您有条件或可选组件，则返回 null 表示“无组件”或“无 JSX”是可行的方法。

此外，正如 @k-wasilweski 所说，使用 .map 将数组转换为一系列组件是 React 中的标准做法。

如果您不喜欢返回 null 的想法，您可以随时在末尾添加 .filter(c => c !== null)，但这确实没有必要。