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>'.
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.fromEntries
susunan tatasusunan kembali kepada tatasusunan objek. Contohnya: