Блог

У меня есть функция, которая получает ввод в виде имени входного файла и значения этого поля ввода в виде

 function handleChange(e:React.ChangeEvent<HTMLInputElement>):void{
    const { name, value } = e.target;
    const key = name
    let newArr = [...form];
    newArr.map(item => {
      return {...form , [key]: value}
    });

    setForm(newArr)
  }
 

Структура представления по умолчанию выглядит следующим образом:

     const form = [{
  "Name":"Nagesh",
  "Email":"abc@gmail.com",
  "Address" : {
    "House_Number":"123",
    "Street_Name":"something",
    "City":"example",
  },
  "Phone_Number":"567899090"
}]
 

Теперь после нажатия на onChange событие я получаю имя поля ввода и значение текущего поля ввода для handleChange функции. Проблема newArr в том, что старое значение не обновляется новым значением и состояние не обновляется новыми значениями.

Например, если я передам значение в name качестве имени поля ввода «Имя», а его значение — «Нагеш Катна», оно получит значения, но не обновит файл newArr. [{"Name": "Nagesh Katna"}]

Если я console.log(newArr) . Массив остается со значениями по умолчанию. Я использую интерфейс TypeScript и semantic-UI в качестве интерфейса.

Я определил интерфейс с той же структурой для формы и использования состояний таким образом

   const defaultView: Values[] = []
  const [form, setForm]: [Values[], (fetch: Values[]) => void] = useState(defaultView);
 

Пожалуйста, спасите мои выходные.

Вы создаете здесь новый массив, неглубокую копию form :

 let newArr = [...form];
 

И вы сопоставляете его, чтобы создать здесь еще один новый массив:

 newArr.map(item => {
  return {...form , [key]: value}
});
 

Но вы никогда не используете результат .map . Вам нужно присвоить его переменной и передать ее setForm .

Кроме того, это, { ...form вероятно, опечатка — вы имели в виду { ...item ?

 const newForm = newArr.map(item => {
  return {...item , [key]: value}
});
setForm(newForm);
 

Более кратко:

 setForm(
    form.map(item => ({
        ...item,
        [name]: value
    }))
);