Блог

Я пытаюсь связать значения моего массива, используя [event.target.name]:event.target.value

но я получаю эту ошибку:

Ошибка типа: не удается прочитать свойство ‘name’ неопределенного значения.

Вот как выглядит мой код:

Массив

  const [data, setData] = useState({
        email: '', first_name: '', last_name: '', occupation: '',
        farm_description: '', farm_name: '', username:'',
        registration_status: false, capacity: '50-100',
        location: '', major_product: '', phone_num: ''
    });
 

Обработчик изменений:

 const handleChange = (event) => {
        setData({
            ...data,
            [event.target.name]: event.target.value,
        });
    };
 

Поле:

   <input type="text" placeholder="John" className="border-remove" 
name="first_name" type="text" onChange={props.handleChange('first_name')}/>
 

Вы передаете first_name вместо события, измените код на это:

 <input type="text" placeholder="John" className="border-remove" name="first_name" type="text" onChange={props.handleChange}/>
 

Вы вызываете handleChange сразу после рендеринга, а не передаете функцию для добавления в качестве слушателя. Вы также передаете ему first_name параметр, когда функция принимает только параметр события. Используйте вместо этого:

 onChange={props.handleChange}
 

Измените эту строку кода

onChange={props.handleChange('first_name')} Для

onChange={props.handleChange}

В вашем коде вы не передаете событие функции, чтобы оно было неопределенным.

[ИЛИ] — передать событие явно методу.

 onChange={(e) => props.handleChange(e)}
 

Функция onChange ввода, и если <input /> и функция изменения дескриптора в том же компоненте, вам не нужно вызывать как props.handleChange . вы можете просто вызвать как handleChange

 onChange={props.handleChange}