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

编辑：几乎改变了这个问题的全部内容

我正在创建一个预订应用程序。大量的重新加载正在发生，根据@jpmarks的建议，我试图找出哪个useffect可能是罪魁祸首，我认为下面的代码可能会运行24次

我还将所有相关组件和控制台警告上载到，假设其他呈现此功能的组件可能会影响它

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

---

我在这里试图做的是查看企业提供哪些服务，从数据库中获取这些信息。如果业务已被接受或尚未被接受，则处理方式会发生变化。

我查看了您的源代码，似乎该组件不对不必要的渲染负责。我建议按照您的编辑器告诉您的那样修复依赖项，看看这是否在修复某些东西。 我坚信是您的上下文在某个效果中得到更新，从而导致上下文重新渲染组件。 要从上下文中找出导致渲染的状态，可以对每个渲染使用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 ]);

---

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

一种可能性是在

Options.js

中，您正在使用

serviceList.map

多次渲染

serviceestabelecemento

。使用

serviceListService.collection（）.onSnapshot

回调在useffect中设置

serviceList

。这样，useffect自然会被调用24次（如果serviceList在快照回调中的值为24）

另一种可能性是，您正在使用三元组渲染

serviceestabelectiono

。这将根据

Establecimento

的值卸载/重新装载组件

const contextoptions setbelectiono=React.createContext（）
导出常量选项=（）=>{
const{establecimento，theme，offeredServices}=useContext（Context）
const[isConfiguring，setIsConfiguring]=useState（false）
常量[serviceList，setServiceList]=useState（[]）
useffect（（）=>{
const unsubscribeServices=serviceListService.collection（）.onSnapshot（快照=>{
const services=snapshot.docs.map（collectIdsAndDocs）
设置服务列表（服务）//{
取消订阅服务（）
}
}, [])
const servicelements=serviceList.map（service=>//您可以删除“所有预订”从useEffect依赖项数组中删除，因为它没有在effect中使用。这可能是原因。由于effect实际上没有直接更新任何组件状态，因此它不会导致渲染，除非businessRef方法导致组件以其他方式渲染。@jpmarks我已尝试过此方法，但它不起作用，因此重新渲染器继续e对阵列中的每个服务调用相同的函数，从而对每个装入的
serviceestabelectiono
重复该效果。我尝试了以下操作，发现问题可能存在于完全不同的组件中！谢谢。我已更新了问题和报告。