React中调用API设状态后用&&条件渲染传值给子组件是常用模式吗？

你看到的这段代码写法属于React社区广泛使用的常规开发实践，是入门阶段处理异步数据加载的标准实现思路，核心解决了「组件初始化拉取远程数据」和「数据未就绪时避免子组件报错」两个普遍需求。

下面拆分各部分的合理性说明：

• useEffect 空依赖触发请求的写法，等价于类组件时代的componentDidMount生命周期，只会在组件首次挂载完成后执行一次数据拉取，是绝大多数场景下初始化静态数据的标准实现方式。
• {header && <Header data={header} />}的短路条件渲染写法，是为了适配异步请求的时序问题：你代码中的useState没有传入初始值，header的初始值为undefined，如果直接渲染Header组件并传入该值，Header内部访问data.xxx属性时会抛出「Cannot read properties of undefined」的运行时错误。这种短路判断会在header为假值（undefined、null等）时直接不渲染Header组件，从根源上避免报错，是React处理异步加载最常用的条件渲染技巧之一。

如果是在生产环境使用，通常会在这个基础上补充更完善的处理逻辑：

• 给useState显式设置初始值，比如const [header, setHeader] = useState(null)，避免隐式undefined带来的不可控问题
• 补充加载状态、错误捕获逻辑：可以新增loading state展示加载骨架屏/加载提示，用try catch包裹请求逻辑，捕获请求失败的场景并展示错误提示，优化用户体验
• 中大型复杂项目中通常会用React Query、SWR等数据请求库替代原生fetch + useState + useEffect的组合，简化缓存、重试、状态管理的逻辑，但核心的条件渲染判断逻辑和你现在看到的写法完全一致。

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