UseEffect 不会在第二次更改时触发，但会在启动时触发两次React 钩子和 apollo-graphql 钩子

问题描述

useEffect 不会在第二次更改时触发，但会在启动时触发两次（React 钩子和 apollo-graphql 钩子）。 在 console.logs 中，我描述了何时触发更改以及何时不触发。 我没有更多线索可以添加。

这是我的页面（Next.js 页面）

import React,{ useEffect,useState } from 'react'
import Calendar from '../components/Calendar';
import { useHallsQuery } from '../generated/graphql';
const schedule = () => {

  const { data,loading,error,refetch:refetchSessions } = useHallsQuery();

  const [sessions,setSessions] = useState([] as any);

  const [owners,setowners] = useState([] as any);
  

  useEffect(() => {
    console.log('On launch trigger twice,on first change trigger once,on second doesn't trigger and later trigger correctly,but it's one change delay');
    if(loading === false && data){
      const colors: any = [
        '#FF3333','#3333FF','#FFFF33','#33FF33','#33FFFF','#9933FF','#FF9933','#FF33FF','#FF3399','#A0A0A0'
      ];
      let pushSessions:any = [];
      let owners:any = [];
      data?.halls?.map(({sessions,...o},index) =>{
        owners.push({id:o.id,text:o.name,color: colors[index%10]});
        sessions.map((session:any) => {
          pushSessions.push({...session,ownerId: o.id});
        })
    })
        setSessions(pushSessions);
        setowners(owners);
    }
},[loading,data])

    if (loading) return <div>Loading...</div>
    if (error) return <div>Error: {error.message}</div>

  return (
    <div>
      <Calendar sessions={sessions} owners={owners} refetchSessions={refetchSessions} />
    </div>
  )
}

export default schedule

以及我获取道具并触发 refetchSessions 的组件部分。

    const Calendar = (props: any) => {
      let { sessions,owners,refetchSessions } = props;
    
      const [moveSession] = useMoveSessionMutation();
    ...
    
    const commitChanges = ({ added,changed,deleted }: any) => {
    
        if (added) {
       //
        }
        if (changed) {
           console.log('trigger on all changes! Correct')
          const id = Object.keys(changed)[0];
            moveSession({variables:{
              input: {
                id: parseInt(id),...changed[id]
              }
            },refetchQueries: refetchSessions
          })
        }
    if (deleted !== undefined) {
      // 
    }

  };

return (

// Some material-ui components and @devexpress/dx-react-scheduler-material-ui components in which commitChanges function is handled

)
export default Calendar;

钩子是用 graphql-codegen(generated/graphql.tsx) 生成的：

   export function useHallsQuery(baSEOptions?: Apollo.QueryHookOptions<HallsQuery,HallsQueryVariables>) {
            return Apollo.useQuery<HallsQuery,HallsQueryVariables>(HallsDocument,baSEOptions);
          }
    export function useHallsLazyQuery(baSEOptions?: Apollo.LazyQueryHookOptions<HallsQuery,HallsQueryVariables>) {
              return Apollo.useLazyQuery<HallsQuery,baSEOptions);
            }
    export type HallsQueryHookResult = ReturnType<typeof useHallsQuery>;

这是架构（graphql/hall.graphql）：

query Halls {
  halls {
    id
    name
    sessions{
      id
      title
      startDate
      endDate
    }
  }
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）