如何在數組物件的情況下，在onChange事件中更新狀態

Question

我有一些狀態：

const [budget, setBudget] =
    React.useState<{ name: string; budget: number | null }[]>();

我試著使用一個TextField根據輸入欄位的名稱和值來更新該狀態：

budget.map((item) => {
      content.push(
        <TextField
          name={item.name}
          id={item.name}
          label={item.name}
          type="tel"
          onChange={handleChange}
        />
      );
    });

我知道這是一個奇怪的情況，但輸入欄位不是預先確定的值，所以我必須動態渲染它們，這讓生活變得困難。

我嘗試了以下的onChange函數，但它不起作用：

const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => () => {
    const newOne = budget?.map((item) =>
      Object.entries(item).map(([key, value]) => {
        if (key === event.target.name) {
          return [key, event.target.value];
        }
        return [key, value];
      })
    );
    setBudget(newOne);
  };

我無意中創建了很多數組，並且得到了以下錯誤（不確定如何僅返回鍵和值）：

Argument of type '(string | number | null)[][][] | undefined' is not assignable to parameter of type 'SetStateAction<{ name: string; budget: number | null; }[] | undefined>'.

Answer 1

我認為問題在於你在handleChange函數中使用了雙箭頭函數，這意味著當事件發生時，內部函數實際上並沒有被執行。你應該去掉多餘的箭頭。

另一個問題是你從map函數傳回了一個陣列的數組，這與你的狀態類型不相容。你應該使用Object.fromEntries將陣列的陣列轉換回物件的陣列。例如：

const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
  const newOne = budget?.map((item) =>
    Object.fromEntries(
      Object.entries(item).map(([key, value]) => {
        if (key === event.target.name) {
          return [key, event.target.value];
        }
        return [key, value];
      })
    )
  );
  setBudget(newOne);
};