Tratando de hacer un juego de tarjetas de memoria por guía con React 18 y la API de Pexels, me encontré con un problema.

Intentando obtener datos de la API de alguna manera, mi aplicación envía una solicitud de red doble por "montaje". Pasé varias horas tratando de arreglarlo sin ningún resultado. También

 useEffect(() => { // some code }, [])

no puedo resolver mi problema.

Código a continuación

índice.js

 import React from 'react'; import ReactDOM from 'react-dom/client'; import {App} from './App'; import './styles/index.scss'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( <React.StrictMode> <App /> </React.StrictMode> );

Aplicación.js

 import React from 'react'; import {Background} from './components/Background/Background'; import {useGetImages} from "./utils/hooks/useGetImages"; export const App = () => { const images = useGetImages(); console.log({images}) return ( <> <Background/> <h1>Memory Game</h1> </> ); }

useGetImages.js // gancho personalizado

 import {useEffect, useState} from "react"; import {BASE_URL} from "../constants/constants"; const getRandomPage = () => Math.round(Math.random() * (60 - 1) +1); export const useGetImages = () => { const [images, setImages] = useState([]); const buildUrl = () => { let url = new URL(BASE_URL); url.search = new URLSearchParams({ query: 'nature', orientation: 'square', size: 'small', per_page: 2, page: getRandomPage(), }); return url; }; useEffect(() => { const fetchPics = () => { fetch(buildUrl(), { headers: { Authorization: process.env.REACT_APP_AUTH_KEY, }, }) .then(data => data.json()) .then(data => setImages(data.photos)); }; fetchPics(); },[]); return images; };

URL base por si acaso

 export const BASE_URL = 'https://api.pexels.com/v1/search';

El componente PS no contiene ninguna lógica, solo animaciones extrañas.

PSS No se puede compartir la clave API en términos de las reglas y leyes de Pexels.

Ayudame por favor...