Cuando estoy obteniendo los datos de la API, si acepto, renderizaré el componente para mostrar los datos. Si se produjo un error, quiero mostrar un mensaje personalizado para diferentes componentes, y durante la obtención de los datos quiero mostrar un cargando mensaje.
export default function App() { const { data: products, loading, error } = useFetch( "products?category=shoes" ); if (error) return <div>Failed to load</div>; if (loading) return <div>wait is Loading</div>; return ( <> <div className="content"> <section id="products">{products.map((product) =>{return <div>product.name</div>})}</section> </div> </> ); }Estoy planeando tener una llamada de búsqueda en múltiples componentes. Entonces, estaba pensando si pudiera escribir la lógica anterior en un solo lugar, como un HOC o Rendered Props y reutilizarlo.
Lo que intenté: pero HOC falló no funcionará porque no puedes llamar ganchos en funciones normales. Tiene que ser un componente. Los accesorios renderizados no funcionarán, ya que da este error: Error: se renderizaron más ganchos que durante el renderizado anterior.
A continuación se muestra mi código de accesorios renderizado fallido
const ShowData= function ({ data: products }) { return ( <div> {products.map(product => {return <div>product.name</div>})} </div> ); }; function SearchCount({ count }) { return <h3>Search Results: {count} items found</h3>; } const Wrapper = function () { return ( <LoadingAndError render={ShowData} params={{ url: "products?category=shoes" }} ></LoadingAndError> ); }; export default Wrapper;La lógica de carga y error se mueve al componente LoadingAndError
const LoadingAndError = function (props) { const { url } = props.params; const { data: products, loading,error} = useFetch(url); if (loading) return <h1>Loading</h1>; if (error) return <h1>Error</h1>; return props.render({ data: products }); };return props.render({ data: products }); Esta línea está llamando a props.render como una función, pero ha pasado un componente. Llamar al componente directamente puede causar exactamente el error que está viendo. Si desea que props.render se use de esta manera, debe pasar una función que crea un elemento, como este:
<LoadingAndError render={(props) => <ShowData {...props} />} params={{ url: "products?category=shoes" }} ></LoadingAndError> Alternativamente, si desea seguir pasando render={ShowData} , cambie loadingAndError para crear un elemento:
const loadingAndError = function (props) { const { url } = props.params; const { data: products, loading,error} = useFetch(url); if (loading) return <h1>Loading</h1>; if (error) return <h1>Error</h1>; const Component = props.render return <Component data={products}/> }