React组件数据加载时：传null还是undefined更合适？

这确实是React开发中很容易踩的细节坑，我来帮你梳理清楚：

核心规则先明确 #

首先要确认React的官方行为：当组件接收到undefined类型的props时，会自动使用defaultProps中对应的默认值；但如果传递的是null，则会直接跳过defaultProps，组件拿到的就是null。这也是你现在需要到处做null校验的根本原因。

手动传递undefined触发defaultProps是否合理？ #

完全合理！这正是让defaultProps发挥设计作用的正确方式。

你给出的示例写法<Component bedrooms={bedrooms || undefined} />是可行的，不过如果要更精准（比如bedrooms可能是0这类假值但你不想转换成undefined的话），推荐用ES2020的空值合并运算符：

<Component bedrooms={bedrooms ?? undefined} />

这样只有当bedrooms是null或undefined时，才会传递undefined给组件，触发defaultProps，避免不必要的类型转换。

这种做法能帮你省去组件内部大量的props.bedrooms != null这类校验，让组件逻辑更简洁，也符合defaultProps的设计初衷——处理props未传入或未就绪的场景。

该规则是否适用于Redux的mapStateToProps？ #

是的，完全适用。

mapStateToProps的本质是把Redux store中的state映射为组件的props，最终传递给组件的逻辑和父组件直接传props完全一致：

• 如果你的selector返回null，那么组件接收到的props就是null，不会触发defaultProps；
• 如果在selector或者mapStateToProps中，把null转换为undefined（比如return { bedrooms: state.bedrooms ?? undefined }），组件就会触发对应的defaultProps。

额外的优化建议 #

如果你觉得手动转换有点繁琐，也可以考虑React 16.3+推荐的写法——使用函数参数默认值替代defaultProps，比如：

function HouseComponent({ bedrooms = 2 }) {
  // 不管传入null还是undefined，bedrooms都会取默认值2
  return <div>Bedrooms: {bedrooms}</div>
}

这种写法更直观，而且对null和undefined都能生效，不需要额外转换，能进一步简化代码。

另外，你也可以考虑在数据加载阶段统一处理状态：比如在父组件或Redux容器中判断数据是否就绪，暂时渲染加载占位符（比如<LoadingSpinner />），直到数据加载完成再渲染目标组件，从根源上避免传递未就绪的props。

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