React中componentDidUpdate仅第二次点击生效，Firebase新增数据后列表无法自动更新

现有代码的核心问题 #

• 异步时序错误：handleCreateSubmit中Firebase的写入操作是异步的，你将修改update状态的逻辑放在了异步操作外侧，不等数据写入完成就触发了列表拉取逻辑，此时拉到的仍是旧数据，自然看不到更新。同时你的try/catch也无法捕获Promise链中抛出的异常。
• async/await用法不规范：fetchGroups声明了async关键字但内部没有用await，也没有返回Promise实例，导致componentDidUpdate中的await逻辑完全不生效。
• 实现方案冗余：主动触发拉取的方式本身不符合Firebase的设计特性，Firestore自带实时快照监听能力，不需要手动维护状态触发刷新。

修复方案 #

1. 快速修复现有逻辑 #

先修正fetchGroups的异步返回：

fetchGroups (id){
  // 返回Promise实例，外层await才会生效
  return fetchGroupsFirebase(id).then((res) => {this.setState({groups:res})})
};

再修正handleCreateSubmit的异步时序，保证所有写入完成后再触发列表拉取：

handleCreateSubmit = async event => {
  event.preventDefault();
  const {name} = this.state;
  try{
    // 等待groups集合写入完成
    const groupRef = await firestore.collection("groups").add({
        title: name,
        owner: this.props.user.id
    });
    // 等待user-group关联关系写入完成
    await firestore.collection("user-group").add({
        idGroup: groupRef.id,
        idUser: this.props.user.id
    });
    // 所有写入操作完成后再修改状态触发拉取
    this.setState({update: !this.state.update});
  } catch(error) {
    console.error(error);
  }
}

2. 更优方案：使用Firestore实时监听 #

直接用Firebase自带的实时快照能力，不需要手动维护update状态、不需要主动触发拉取，数据变更时会自动同步到前端：

constructor(props){
  super(props);
  this.state = {
    groups: [],
    code:'',
    name:''
    // 可以删除update变量
  }
}

componentDidMount() {
  // 开启groups数据的实时监听，数据变化自动更新state
  this.unsubscribeGroups = firestore.collection('groups')
    .where('owner', '==', this.props.user.id)
    .onSnapshot(snapshot => {
      const newGroups = snapshot.docs.map(doc => ({
        id: doc.id,
        ...doc.data()
      }))
      this.setState({groups: newGroups})
    })
}

componentWillUnmount() {
  // 组件卸载时取消监听，避免内存泄漏
  this.unsubscribeGroups && this.unsubscribeGroups()
}

// handleCreateSubmit不需要额外加触发刷新的逻辑，写完数据监听会自动更新列表
handleCreateSubmit = async event => {
  event.preventDefault();
  const{name} = this.state;
  try{
    const ref = await firestore.collection("groups").add({
        title:name,
        owner:this.props.user.id
    })
    await firestore.collection("user-group").add({
        idGroup:ref.id,
        idUser:this.props.user.id
    });
  }catch(error){
    console.error(error);
  }
}

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