ReactJS中如何让组件等待前序组件Firebase操作完成后再渲染

核心思路：通过父组件状态控制子组件渲染时机，子组件完成所有异步操作后通过回调通知父组件更新状态，触发下一个依赖组件的渲染，从根源上避免前置数据未写入就触发后续读操作的问题。

步骤1：父组件新增状态控制渲染开关 #

在容器组件内新增两个状态，分别标记前两个组件的异步操作是否完成：

import { useState } from 'react';

// 容器组件内部代码
const [isGroupPrefDone, setIsGroupPrefDone] = useState(false);
const [isSetupDbDone, setIsSetupDbDone] = useState(false);

步骤2：改造子组件增加完成回调 #

改造GroupPreferences组件 #

该组件为使用useEffect的函数组件，将所有Firebase异步操作封装为async函数，全部执行完成后调用父组件传入的完成回调：

// GroupPreferences 组件内部代码
useEffect(() => {
  const handleDbOperations = async () => {
    // 保留你原有Firebase读写逻辑，全部用await等待执行完成
    await db.collection('groupPrefs').doc(/* 你的文档ID */).set(/* 你的写入数据 */);
    // 所有操作完成后触发回调通知父组件
    props.onComplete?.();
  };
  handleDbOperations();
}, []);

改造SetupDatabase组件 #

该组件为类组件，在componentDidMount生命周期中处理异步逻辑，全部操作完成后触发回调：

// SetupDatabase 类组件内部代码
async componentDidMount() {
  // 保留你原有Firebase读写逻辑，全部用await等待执行完成
  await db.collection('groupData').doc(this.props.gId).set(/* 你的写入数据 */);
  // 所有操作完成后触发回调通知父组件
  this.props.onComplete?.();
}

步骤3：修改容器组件渲染逻辑为条件渲染 #

只有前一个组件标记为操作完成时，才渲染下一个依赖组件：

<React.Fragment>
  <div className="flex">
    <GroupPreferences onComplete={() => setIsGroupPrefDone(true)} />
    {isGroupPrefDone && (
      <SetupDatabase 
        gId={groupID} 
        onComplete={() => setIsSetupDbDone(true)} 
      />
    )}
    {isSetupDbDone && (
      <Restaurants 
        gId={groupID} 
        user={user} 
        history={history} 
      />
    )}
  </div>
</React.Fragment>

如果需要保留布局占位，可替换为加载状态避免页面跳动：

{isGroupPrefDone ? (
  <SetupDatabase gId={groupID} onComplete={() => setIsSetupDbDone(true)} />
) : <div className="skeleton-box">分组配置加载中...</div>}

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