Bagaimana untuk mengemas kini keadaan dalam acara onChange dalam kes objek tatasusunan
P粉726234648
P粉726234648 2023-09-17 20:42:24
0
1
494

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>'.

P粉726234648
P粉726234648

membalas semua(1)
P粉993712159

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);
};
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!