javascript - 如何处理由于从 Firestore DB 检索而多次运行的 UseEffect？

Question

编辑:几乎改变了这个问题的整个主体
我正在构建一个预订应用程序。正在发生大量的重新渲染，并且根据@jpmarks 的建议，我试图找出哪个 useEffect 可能是罪魁祸首，并认为可能是下面的一段代码，它运行了 24 次。
我还将所有相关组件和控制台警告上传到 this repo ，假设渲染它的其他组件可能会影响它。

useEffect(
    () => {
      console.log('useEffect ServicEstabelecimento ran') //runs 24 times

      async function getOfferedServicesFromDB() {
        const approved = await approvedBusinessService.doc(businessId)
        const snapshotApproved = await approved.get()
        if (snapshotApproved.exists && snapshotApproved.data().offeredServices) {
          setOfferedServices(Object.values(snapshotApproved.data().offeredServices))
        } else {
          const pending = await businessPendingApprovalService.doc(businessId)
          const snapshotPending = await pending.get()
          if (snapshotPending.exists && snapshotPending.data().offeredServices)
            setOfferedServices(Object.values(snapshotPending.data().offeredServices))
        }
        return
      }
      getOfferedServicesFromDB()
    },
    [
      /* businessId, setOfferedServices */
    ],
  )
  //React Hook useEffect has missing dependencies: 
  //'businessId' and 'setOfferedServices'. 
  //Either include them or remove the dependency array
  //Tried adding them separately or both, nothing changes

我在这里尝试做的是查看企业提供哪些服务，从数据库中获取该信息。无论业务是否已被接受，处理方式都会发生变化。

Answer 1

我查看了您的源代码，看起来该组件不对不必要的渲染负责。我建议按照您的编辑器告诉您的那样修复依赖关系，看看这是否修复了某些问题。
我坚信您的上下文会在您的一个效果中更新，从而导致上下文重新渲染组件。
要从上下文中找出导致渲染的状态，您可以对它们中的每一个使用 useEffect 来检查。

const { theme, userObject, dateForRenderingTimeGrid } = useContext(Context);

useEffect(() => {
  console.log("Theme updated");
}, [theme]);
useEffect(() => {
  console.log("UserObject updated");
}, [userObject]);
useEffect(() => {
  console.log("DateForRenderingTimeGrid updated");
}, [dateForRenderingTimeGrid ]);

让我知道你在看什么。如果这些都没有真正触发效果但您仍然看到渲染，那么您可以确定它发生在您的组件中