这个问题的原因是使用了Apollo useLazyQuery hook进行查询时,组件可能会因为某种原因多次重新渲染。每次渲染时,onCompleted回调都会被触发一次。为了避免出现这种情况,我们可以使用useRef hook来跟踪每次组件渲染后的onCompleted回调函数,只有在回调函数改变时才重新执行它。
示例代码:
import React, { useEffect, useRef } from 'react';
import { useLazyQuery } from '@apollo/react-hooks';
import { QUERY } from './queries';
const MyComponent = () => {
const [executeQuery, { data }] = useLazyQuery(QUERY);
const onCompletedRef = useRef();
// Store the onCompleted callback in a ref
useEffect(() => {
onCompletedRef.current = () => {
// Perform actions after query completes
};
}, []);
// Call the stored onCompleted callback
useEffect(() => {
if (data && onCompletedRef.current) {
onCompletedRef.current();
}
}, [data]);
return (
{data && {data}}
);
};
export default MyComponent;