Question

我正在循环使用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循环。

Answer 1

是的，推荐这样做。

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

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

如果您不喜欢返回空值的想法，则可以始终在末尾添加.filter(c => c !== null)，但这确实是不必要的。

Answer 2

没关系，但是在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>
);

使用map在React中循环访问数组时返回null而不是JSX

2 个答案: