a continuación, es un código que usa un HOC para mostrar algunos componentes mientras se realiza una búsqueda (con un enlace personalizado) a una API REST.
De useSearchParams() obtengo la cadena de consulta que se usará para obtener datos.
El problema aquí es que cuando se representa el componente, useFetch se ejecuta pero el parámetro de búsqueda (param) no está listo, entonces fetch se ejecuta con un valor nulo.
const withLoading = (WrappedComponent) => { const HocComponent = ({ ...props }) => { const [urlParams, setUrlParams] = useSearchParams() const [param, setParam] = useState() useEffect(() => { console.log(urlParams.get("text")); setParam(urlParams.get("text")) }, [urlParams]) const { data, loading, error } = useFetch("api_server", "/articles", { 'text': param }) if (loading) return ( <div className="grid grid-cols-6"> {Array(6).map(el => <ProductPulse />)} </div> ) return <WrappedComponent data={data} error={error} /> } return HocComponent }¿Algún comentario sobre cómo resolver este problema usando el gancho useFetch?
He intentado muchas maneras diferentes sin suerte.
Espero usar el gancho personalizado useFetch en este escenario.
Se ha llamado a su API cuando se procesa HocComponent , por lo que no esperará la respuesta de su API.
Idealmente, debería tener un estado de loading para esperar a que se complete la recuperación, y también puede establecer el estado de data en lugar del estado de useEffect param que urlParams haya cambiado.
const withLoading = (WrappedComponent) => { const HocComponent = ({ ...props }) => { const [urlParams, setUrlParams] = useSearchParams() //`response` state to listen to API response changes const [response, setResponse] = useState({ data: null, error: null, loading: true }) useEffect(() => { console.log(urlParams.get("text")); const param = urlParams.get("text"); //`urlParams` gets changed and not undefined, we call API here if(urlParams.get("text")) { const { data, loading, error } = useFetch("api_server", "/articles", { 'text': param }); setResponse({ data, loading, error }) } }, [urlParams]) const { loading, data, error } = response if (loading) return ( <div className="grid grid-cols-6"> {Array(6).map(el => <ProductPulse />)} </div> ) return <WrappedComponent data={data} error={error} /> } return HocComponent }El problema con la implementación actual es que está almacenando en caché el parámetro param de text en el estado, lo que retrasa que el valor del estado del parámetro esté disponible en al menos un ciclo de procesamiento.
Sin embargo, la solución es trivial, simplemente consuma el parámetro param de text directamente, no hay necesidad de ningún estado de parámetro.
Ejemplo:
const withLoading = Component => props => { const [urlParams] = useSearchParams(); const param = urlParams.get("text"); const { data, loading, error } = useFetch( "api_server", "/articles", { text: param }, ); if (loading) { return ( <div className="grid grid-cols-6"> {Array(6).map((el, key) => <ProductPulse key={key} />)} </div> ); } return <Component data={data} error={error} />; };