React中基于数组Props的条件渲染问题：空数组时组件仍渲染

我懂你现在的困扰——想在this.props.data是空数组时不渲染组件，有内容的时候才渲染，但之前的两种判断方式都没生效对吧？

为什么之前的方法行不通？ #

在JavaScript里，空数组[]属于“真值（truthy）”，也就是说当你用this.props.data && ...或者this.props.data != null判断时，空数组会被判定为true，所以后面的组件始终会被渲染。这就是你之前两次尝试都失败的核心原因～

正确的解决方案 #

这里给你几个实用的实现方式：

1. 直接检查数组长度（最常用）

通过判断数组的length属性是否大于0，来控制组件的渲染：

{this.props.data.length > 0 && (
  <Field label="Data" name="data" type="select" component={SelectComponent}>
    <option>Select data</option>
  </Field>
)}

空数组的length是0，0属于“假值（falsy）”，所以当data是空数组时，逻辑与运算会短路，不会执行后面的组件渲染逻辑。

2. 先确认是数组再检查长度（更严谨）

如果担心this.props.data可能不是数组（比如传入了null/undefined或者其他类型），可以先加上Array.isArray的判断，避免报错：

{Array.isArray(this.props.data) && this.props.data.length > 0 && (
  <Field label="Data" name="data" type="select" component={SelectComponent}>
    <option>Select data</option>
  </Field>
)}

3. 用可选链简化判断（ES2020+）

如果你的项目环境支持ES2020及以上语法，还可以用可选链操作符?.来简化写法：

{this.props.data?.length > 0 && (
  <Field label="Data" name="data" type="select" component={SelectComponent}>
    <option>Select data</option>
  </Field>
)}

data?.length会在data是null或undefined时返回undefined，此时undefined > 0是false，不会渲染组件；如果data是数组，就会正常判断长度。

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