Estoy tratando de agregar un objeto Fecha como una variable de consulta de reacción, sin embargo, cada vez que uso una fecha dinámica, en lugar de un valor estático, llama a la consulta infinitamente, en lugar de solo una vez. No estoy seguro de cuál es la mejor manera de romper este ciclo o de refactorizar el código para que se ejecute solo una vez. ¿Alguien puede ver lo que estoy haciendo mal?
Para ser claros, el ciclo infinito ocurre cuando reemplazo "2022-04-20T23:40:09.038Z" con la constante 'hoy'.
const MoviesPage = () => { const [activeTab, setActiveTab] = useState<TabType | undefined>(tabs?.[0]); const [noOfColumns, setNoOfColumns] = useState(0); const [{ page, titles }, setState] = useState<State>(DEFAULT_STATE); const handleTabClick = (tab: TabType) => { setState({ page: 0, titles: [] }); setActiveTab(tab); }; const today = dayjs().toISOString(); const { data, isFetching } = useMoviesQuery(gqlClient, { page: page, limit: 16, afterDate: activeTab?.name === "coming-soon" && "2022-04-20T23:40:09.038Z", }); useEffect(() => { if (isFetching) { return; } if (data) { setState((v) => { return { ...v, titles: [...v.titles, ...data.movies], page: page, }; }); } }, [data, isFetching, setState, page]);No estoy muy seguro de qué está haciendo useMoviesQuery , pero lo cambiaría a lo siguiente. Pasar objetos como data por ejemplo, sin acceder a una propiedad, es propenso a causar bucles infinitos (esto se basa completamente en mi experiencia).
Mi suposición es que useMoviesQuery se ejecuta constantemente en función de un evento onChange, ¿quizás? por lo tanto, los datos se actualizan constantemente, lo que activa el useEffect de uso. Pasar solo isFetching debería ser suficiente para obtener las últimas actualizaciones de data . Es decir, si isFetching se actualiza. Es posible que se establezca de verdadero a falso en milisegundos en función de onChangeEvent o de cómo se active esta consulta.
const MoviesPage = () => { const [activeTab, setActiveTab] = useState<TabType | undefined>(tabs?.[0]); const [noOfColumns, setNoOfColumns] = useState(0); const [{ page, titles }, setState] = useState<State>(DEFAULT_STATE); const handleTabClick = (tab: TabType) => { setState({ page: 0, titles: [] }); setActiveTab(tab); }; const today = dayjs().toISOString(); const { data, isFetching } = useMoviesQuery(gqlClient, { page: page, limit: 16, afterDate: activeTab?.name === "coming-soon" && "2022-04-20T23:40:09.038Z", }); useEffect(() => { if (isFetching) { return; } if (!isFetching && data) { setState((v) => { return { ...v, titles: [...v.titles, ...data.movies], page: page, }; }); } }, [isFetching])