Estoy tratando de hacer una llamada a la primera API que contiene una carga de diferentes CATEGORÍAS y luego usarla para hacer una segunda llamada a otra API que contiene diferentes elementos de categoría de cada CATEGORÍA de la primera. Soy nuevo en reaccionar y no sé muy bien cómo hacer que la lógica funcione. Esta es mi idea a continuación. Los elementos de categoría se muestran en función de las CATEGORÍAS seleccionadas. Estoy confundido sobre cómo usar el valor de la primera para hacer la segunda llamada.
const [catalog,setCatalog] = useState([]); const [catalogItems,setCatalogItems]= useState([]); useEffect(() => { const fetchData = async () => { await fetchMarketingCategories() .then((result)=>{ setCatalog(result); console.log("result",result); }) .then(async (categoryId)=>{ const {items = []} = await getAdvisorMarketingCatalog(categoryId) setCatalogItems(items); }) }; fetchData(); }); }, []);Solo use async await, no use async await con then .
Así como esto:
useEffect(async () => { const result = await fetchMarketingCategories() setCatalog(result) console.log('result', result) // not sure how you want to get the id from result const categoryId = getCategoryIdFromResult(result) const { items = [] } = await getAdvisorMarketingCatalog(categoryId) setCatalogItems(items) })No estoy completamente seguro de lo que estás haciendo, pero explicaré lo que estoy haciendo a continuación.
Cuando se carga mi componente, con la ayuda de mi primer useEffect , obtengo los primeros catálogos. Estos resultados luego se representan en la interfaz de usuario. Cuando el usuario hace clic en cualquiera de los catálogos, configuro su id en estado y, con la ayuda de mi segundo useEffect , obtengo el siguiente resultado de la API.
Aquí está mi código:
function App() { const [catalog, setCatalog] = useState([]); const [catalogItems, setCatalogItems] = useState([]); const [selectedCatalog, setSelectedCatalog] = useState(); useEffect(() => { const fetchData = async () => { const result = await fetchMarketingCategories(); setCatalog(result); console.log("result", result); }; fetchData(); }, []); useEffect(() => { const fetchDetails = async () => { const { items = [] } = await getAdvisorMarketingCatalog(selectedCatalog); setCatalogItems(items); }; if (selectedCatalog) { fetchDetails(); } }, [selectedCatalog]); return ( <div> {catalog?.map((c) => ( <div onClick={() => setSelectedCatalog(c.id)}>{c.name}</div> ))} </div> ); }Creo que está tratando de obtener datos en función de los datos obtenidos previamente y hacerlo simultáneamente. Para hacerlo una forma puede ser:
const fetchData = async () => { try { const getCategories = await fetchMarketingCategories() setCatalog(getCategories) // Now if fetch1 gives you array of catalogs with id you can just use // Array.map() to fetch catalog items. But this will ping a lot of request // to the api. But if this is the only way you need to do then go ahead. let finalData = [] finalData = getCategories.map(async (items, idx)=> { return await getAdvisorMarketingCatalog(items.id) }) setCatalogItems(finalData) } catch (err) { // Do what you want with the error } } useEffect(()=> { let ignore = false if (!ignore) { fetchData() } return () => ignore = true }, [])