react jsx拒絕在ui中顯示更新的state

Question

我有兩餐日記object

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>
  );
}

我選擇了從后端調用的成分，每次我 select 當前成分時，我都將其設置為日記：

// 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]);

如您所見，第一餐是空的，但是當我在控制台上登錄時，我可以看到正確的productName這個錯誤的原因是什么？

Answer 1

您正在以錯誤的方式更新 state，您正在改變覆蓋現有數組的原始數組，相反，您需要以不可變的方式進行操作，即在您想要更新時提供一個新的日記實例，您可以通過以下方式進行

  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]);

Answer 2

根據我有限的反應經驗，當發生這種有趣的事情時，我有一些首選方法可以嘗試。 其中之一是在將 function 作為道具向下傳遞時調用空的 function。 即代替：

<MealComponentForMagicDiary
            diary={diary}
            setDiary={setDiary}
            index={index}
          />

嘗試：

<MealComponentForMagicDiary
            diary={diary}
            setDiary={() => setDiary}
            index={index}
          />

我很想知道為什么這有時會起作用，如果有人（有人嗎？）理解正確的反應。

我的手指交叉，它對你有用

Answer 3

很難准確地說出這個給定的信息，但我傾向於這樣說：

你沒有得到你想要的信息，因為當組件呈現時，它不存在。 舉個例子：

<p>meal 1: {diary[0].ingredient?.productName}</p>

您檢查ingredient是否存在，但您確定diary[0]存在嗎？ 由於您將此數據設置在 useEffect 的其他位置，我懷疑它在渲染時不可用 - 即使您可以對其進行控制台。

我建議使用React 開發者工具來查看你的組件樹，看看 state 在渲染時的樣子。

這就是我能猜到的，沒有更多的代碼。