Question

我具有以下功能：

public GetExercisePosts(user: User): ExercisePost[] {
    const exercisePosts = new Array<ExercisePost>();
    firebase.firestore().collection('exercise-posts').where('created-by', '==', user.Id).onSnapshot((results) => {
      results.forEach((postDoc) => {
        const exercisePost = Deserializer.DeserializeExercisePost(postDoc);
        if (exercisePost) {
          exercisePosts.push(exercisePost);
        }
      });
    });
    return exercisePosts;
  }

另一个react组件将像这样调用函数：

public async componentDidMount() {
    const personalExercisePosts = this.exerciseService.GetExercisePosts(this.state.currentUser);
    this.setState({ personalExercisePosts });
  }

这第一次效果很好，但是快照更改后，GetExercisePosts的原始方法不会被触发，这是有道理的，因为componentDidMount在组件的生命周期中仅被调用过一次。但是，我确实知道会调用快照函数，因为当我通过Firestore管理控制台添加记录时，它将记录新数据。

如何观察对该快照所做的更改？还是快照发出了组件可以侦听的更改？据我了解，我可以介绍Redux，但是在此关头，我想避免这种情况。

Answer 1

您可以注册一个回调而不是返回一个回调，这样在快照更改时它将触发，如下所示：

public GetExercisePosts(user: User, callback: (results: ExercisePost[]) => void) {
    const exercisePosts = new Array<ExercisePost>();
    firebase.firestore().collection('exercise-posts').where('created-by', '==', user.Id).onSnapshot((results) => {
      results.forEach((postDoc) => {
        const exercisePost = Deserializer.DeserializeExercisePost(postDoc);
        if (exercisePost) {
          exercisePosts.push(exercisePost);
        }
      });
      callback(exercisePosts);
    });
  }

  public async componentDidMount() {
    const personalExercisePosts = this.exerciseService.GetExercisePosts(this.state.currentUser, (posts) {
      this.setState({ posts });
    });
  }

如何观察对调用onSnapShot firestore的函数所做的更改？

1 个答案: