如何防止Firebase collection.doc.get查询重复执行，仅单次拉取文档且不阻塞表单更新

你当前的Firestore查询代码直接写在组件顶层，函数组件每次重渲染时都会从头执行所有顶层代码：用户在表单输入触发setAbout更新状态后，组件会触发重渲染，查询逻辑会重新执行，把刚设置的about/interests状态又覆盖为Firestore拉取的旧数据，所以看起来表单输入没有生效。

使用React的useEffect钩子包裹查询逻辑，传入空依赖数组，确保查询仅在组件首次挂载完成后执行1次，后续组件重渲染不会再触发该查询：

// 首先从react包导入useEffect钩子
import { useEffect } from 'react'

// 组件内部替换原有查询代码
useEffect(() => {
  const docRef = store.collection('users').doc(props.route.params.user.id)
  docRef.get().then((doc) => {
    if (doc.exists) {
      setInterests(doc.data().interests);
      setAbout(doc.data().about);
    }
  });
}, []) // 空依赖数组代表该副作用仅执行一次

修改后首次拉取数据初始化表单状态后，不会再重复执行查询覆盖用户输入，表单即可正常更新。

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