Bagaimana untuk mengemas kini keadaan dalam acara onChange dalam kes objek tatasusunan

Question

Saya mempunyai beberapa status:

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

Saya cuba menggunakan TextField untuk mengemas kini keadaan itu berdasarkan nama dan nilai medan input:

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

Saya tahu ini adalah situasi yang pelik, tetapi medan input bukanlah nilai yang telah ditetapkan jadi saya perlu menjadikannya secara dinamik yang menyukarkan kehidupan.

Saya mencuba fungsi onChange berikut tetapi ia tidak berfungsi:

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

Saya mencipta banyak tatasusunan secara tidak sengaja dan mendapat ralat berikut (tidak pasti cara mengembalikan kunci dan nilai sahaja):

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

Answer 1

Saya rasa masalahnya ialah anda menggunakan fungsi anak panah berganda di dalam fungsi handleChange, yang bermaksud apabila peristiwa itu berlaku, fungsi dalam sebenarnya tidak dilaksanakan. Anda harus mengeluarkan anak panah tambahan.

Masalah lain ialah anda menukar daripada map函数中返回了一个数组的数组，这与你的状态类型不兼容。你应该使用Object.fromEntriessusunan tatasusunan kembali kepada tatasusunan objek. Contohnya:

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