Реализация массива в поле формы с использованием оператора индекса и распространения

javascript #reactjs #typescript #forms

#javascript #reactjs #typescript #формы

Вопрос:

Я хочу реализовать форму, которая может обрабатывать данные массива с помощью динамического поля. Я создаю это приложение с помощью TypeScript.

Но это дало мне error :

 Element implicitly has an 'any' type because expression of type 'any' can't be used to index type '{ name: string; email: string; }'.ts(7053) 
 

Я искал в Google об этом. Я нашел источник, аналогичный моей проблеме.

Это часть кода

 const [formValues, setFormValues] = React.useState([{ name: "", email: "" }]);

  let handleChangeForm = (i: any, e: any) => {
    let newFormValues = [...formValues];
    newFormValues[i][e.target.name] = e.target.value;
    setFormValues(newFormValues);
  };
 

Это ссылка на этот источник:
https://bapunawarsaddam.medium.com/add-and-remove-form-fields-dynamically-using-react-and-react-hooks-3b033c3c0bf5

Комментарии:

1. попробуйте изменить тип «i» и «e» на string в handleChangeForm like: (i: string, e: { name: string, email : string})

2. @kian это все еще выдает мне ошибку: в i (Element implicitly has an 'any' type because index expression is not of type 'number'.) и target: (Property 'target' does not exist on type '{ name: string; email: string; }'.)

3. итак, попробуйте это: (i: number, e: React.ChangeEvent<HTMLInputElement>)

4.@kian сгенерирована новая ошибка: Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ name: string; email: string; }'. No index signature with a parameter of type 'string' was found on type '{ name: string; email: string; }'.

Ответ №1:

Я меняю код для решения проблемы:

 let handleChangeForm = (i: any, e: any) => {
    setFormValues(([i][e.target.name] = e.target.value));
};