un documento de reacción sobre mi pregunta
import { useParams } from 'react-router-dom'; import { useFetch } from '../../hooks/useFetch'; import { URL } from '../../util/fetchURL'; export default function Recipe() { const { id } = useParams(); const { data: recipe, isPending, error } = useFetch(`${URL}/${id}`); return ( <div className='recipe'> {error && <p className='error'>{error}</p>} {isPending && <p className='loading'>loding...</p>} {recipe && ( <> <h2 className='page-title'>{title}</h2> <p>Takes {cookingTime} to cook.</p> <ul> {ingredients.map((ing) => ( <li key={ing}>{ing}</li> ))} </ul> <p className='method'>{method}</p> </> )} </div> ); }así que básicamente, tengo un gancho useFetch personalizado que devuelve algunos datos y otras cosas.
en la variable 'receta', tengo un objeto que consta de 'título, tiempo de cocción, método', etc.
mi pregunta es, cómo deconstruir este objeto de receta en:
const {title, cookingTime, method, ingredients} = recipeeste código no funcionará si lo coloco debajo del gancho useFetch porque al principio, será nulo antes de entrar en el gancho useEffect que está dentro del useFetch, ¿alguna idea?
Haría otro componente, tal vez llamarlo RecipeData , que transmite la receta del resultado de búsqueda como accesorio, y solo se procesa si los datos existen.
const RecipeData = ({ recipe }) => { const {title, cookingTime, method, ingredients} = recipe; return (<> <h2 className='page-title'>{title}</h2> <p>Takes {cookingTime} to cook.</p> ... ); }; export default function Recipe() { const { id } = useParams(); const { data: recipe, isPending, error } = useFetch(`${URL}/${id}`); return ( <div className='recipe'> {error && <p className='error'>{error}</p>} {isPending && <p className='loading'>loding...</p>} {recipe && <RecipeData recipe={recipe} />} </div> ); }