如何在调用map()前判断两个数组中至少有一个存在？

解决方案 #

你可以通过空值合并运算符给数组加空数组兜底，再合并/分开遍历即可实现需求，具体代码如下：

如果两个数组的渲染逻辑一致，可以合并后统一遍历：

// 不存在的数组默认兜底为空数组，避免报错
const finalList = [...(data ?? []), ...(data1 ?? [])]

{finalList.map((ac1: any) => (
  <component prop1={data} prop2={data1} />
))}

如果两个数组需要分别走不同的渲染逻辑，分开加兜底单独遍历即可：

<>
  {/* 数组data存在时执行对应渲染 */}
  {(data ?? []).map((item: any) => (
    <component prop1={data} prop2={data1} />
  ))}
  {/* 数组data1存在时执行对应渲染 */}
  {(data1 ?? []).map((ac1: any) => (
    <component prop1={data} prop2={data1} />
  ))}
</>

如果你的data1是挂载在data对象下的属性，只需要把对应兜底逻辑调整为(data?.data1 ?? [])即可。

原理说明

• 空值合并运算符??会在左侧值为undefined/null时返回右侧的默认值，这里给不存在的数组默认返回空数组，不会触发遍历报错
• 空数组执行map方法不会返回内容也不会抛错，自然实现了只有数组存在（有值）时才执行对应渲染逻辑的效果

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