0
163
Vistasreaccionar jsx se niega a mostrar el estado actualizado en la interfaz de usuario
Tengo un objeto diario con 2 comidas.
function Magicdiary() { const [diary, setDiary] = React.useState<MagicDiaryDay[]>([ { mealName: "Breakfast", ingredient: null }, { mealName: "Lunch", ingredient: null }, ]); return ( <div> <p>meal 1: {diary[0].ingredient?.productName}</p> <Button onClick={() => console.log(diary[0].ingredient?.productName)}> log diary </Button> {diary.map((meal, index) => { return ( <MealComponentForMagicDiary diary={diary} setDiary={setDiary} index={index} /> ); })} </div> ); }Tengo una selección de ingredientes que llamo desde mi backend, y cada vez que selecciono el ingrediente actual, lo configuro en el diario:
// MealComponentForMagicDiary useEffect(() => { if (hit) { const diaryCopy = diary; diaryCopy[index].ingredient = { productName: hit.productName, nutrients: { "energy-kcal_serving": hit.calories, protein_serving: hit.protein, carbohydrates_serving: hit.carbs, fat_serving: hit.fats, }, }; setDiary(diaryCopy); } }, [hit, selectedHit]);Como puede ver, la comida 1 está vacía, pero cuando la registro en la consola puedo ver el nombre del producto correcto. ¿ Cuál es la causa de este error?
3 Respuestas
Responde la pregunta0
Está actualizando el estado de manera incorrecta, está mutando la matriz original que está sobrescribiendo la matriz existente. En cambio, debe hacerlo de una manera inmutable que proporcione una nueva Instancia de diario cada vez que desee actualizarlo, usted puede hacer de la siguiente manera
useEffect(() => { if (hit) { const diaryCopy = diary.map((d, ind) => { if (ind === index) { // The Diary ingredient you want to update d.ingredient = { productName: hit.productName, nutrients: { "energy-kcal_serving": hit.calories, protein_serving: hit.protein, carbohydrates_serving: hit.carbs, fat_serving: hit.fats, } }; } return d; } ); setDiary(diaryCopy); } }, [hit, selectedHit]);0
Desde mi experiencia de reacción limitada , cuando suceden cosas divertidas como esta, tengo algunos métodos para probar. Una de ellas es llamar a una función vacía cuando se pasa una función como accesorio. es decir, en lugar de:
<MealComponentForMagicDiary diary={diary} setDiary={setDiary} index={index} />probar:
<MealComponentForMagicDiary diary={diary} setDiary={() => setDiary} index={index} />Me encantaría saber por qué esto funciona a veces, si alguien (¿alguien?) entiende cómo reaccionar correctamente.
¡Cruzo los dedos para que te funcione!
0
Es difícil decir exactamente con esta información dada, pero me inclino a decir esto:
No está obteniendo la información que desea porque cuando el componente se procesa, no está allí. Tomemos por ejemplo esto:
<p>meal 1: {diary[0].ingredient?.productName}</p> Comprueba si existe el ingredient , pero ¿está seguro de que existe el diary[0] ? Dado que está configurando estos datos en otro lugar en un useEffect, sospecho que no está disponible en el procesamiento, aunque puede consolarlo.
Sugiero usar React Developer Tools para mirar su árbol de componentes y ver cómo se ve ese estado cuando se procesa.
Eso es todo lo que puedo adivinar sin más código.