So aktualisieren Sie den Status im onChange-Ereignis im Falle eines Array-Objekts

Question

Ich habe einen Status:

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

Ich versuche, ein TextField zu verwenden, um diesen Status basierend auf dem Namen und Wert des Eingabefelds zu aktualisieren:

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

Ich weiß, das ist eine seltsame Situation, aber die Eingabefelder sind keine vorgegebenen Werte, also muss ich sie dynamisch rendern, was das Leben schwer macht.

Ich habe die folgende onChange-Funktion ausprobiert, aber sie funktioniert nicht:

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

Ich habe versehentlich viele Arrays erstellt und die folgende Fehlermeldung erhalten (ich bin mir nicht sicher, wie ich nur die Schlüssel und Werte zurückgeben soll):

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