useEffect 挂钩从返回承诺的函数更新状态

Question

我有一个返回对象的函数。

看起来像这样

const aggResults = data => {
  const { surveyName, questionId } = data
  const db = firebase.firestore()
  const surveyData = db.collection('surveys').doc(surveyName)

  return surveyData.onSnapshot(doc => {
    console.log('test', doc.data().aggResults[questionId])
    return doc.data().aggResults[questionId]
  })
}

来自同一个文件，我这样调用我的函数

 {
      ...
      output: {
        ...
        function: () => aggResults({ surveyName: '...', questionId: '...' }),
      },
    },

在一个单独的文件中，我想根据 aggResults 返回的内容更新我的状态。

我使用了一个 useEffect 钩子来做到这一点

const [data, updateData] = useState({})
  useEffect(() => {
    if (!_.isUndefined(question.output)) {
      question.output.function().then(res => updateData(res))
    } else {
      console.log('q', question.output)
    }
  }, [question])

我目前遇到的错误是 TypeError: question.output.function().then is not a function

我哪里出错了？

Answer 1

onSnapshot 不返回承诺。它返回一个取消订阅函数，您调用该函数以从 DocumentReference 中删除侦听器。您可以在documentation 中看到一个示例。当你调用question.output.function()时，它会返回这个退订函数。

快照侦听器用于接收随时间变化的文档的更新。如果您尝试在不监听正在进行的更改的情况下执行单个查询，则应使用get() 而不是onSnapshot()，如documentation 所示。 get() 返回一个以包含文档数据的DocumentSnapshot 解析的承诺。