0
286
VistasEnvío datos como accesorios a los componentes. Pero, solo el último componente que muestra datos
Quería construir una aplicación web de alimentos. Quería obtener datos de API y enviarlos a diferentes componentes. Cuando se haga clic en los componentes, mostrarán datos de acuerdo con los accesorios que se les envíen.
Pero, aquí el problema es que solo el último componente muestra datos. otros no lo son.
Imagen1 (Inicio.js) 
Image2 (Home.js-restante) 
Imagen 3 (componente del desayuno) 
Image4 (Componente de almuerzo) 
Imagen 5 (componente de la cena) 
Imagen6(Salida1) 
Imagen7 (Salida2) 
Imagen8 (Salida3) 
1 Respuestas
Responde la pregunta0
Bien, algunas cosas:
- Publique su código real, no imágenes del código
- La función
.mapsi para construir una nueva matriz, no está realmente diseñada para recorrer una matriz, use algo como.forEachpara eso - Cada iteración de
.mapa la que llamasetBreakfast(o uno de los otros) y sobrescribe el valor de estado anterior. Desea construir una matriz y establecer el estado de esa matriz - Como regla general, no actualice el estado de React en un bucle, es ineficiente y puede causar problemas. Ejecute un ciclo para construir una estructura de valor/datos, luego establezca el estado en ese
Lo que quieres hacer es algo como esto:
.then( setBreakfast(data.map(food => food.breakfast)); setLunch(data.map(food => food.lunch)); setDinner(data.map(food => food.dinner)); ); De esa manera, está configurando el valor de estado en el valor de retorno de .map , que es una matriz que contiene todos los valores de comida correspondientes para ese tipo de comida.