Factionnement Formulaire Control реагировать?

У меня проблема с реакцией. с формой я создал больше входных данных, которые контролируются. Я создал функцию, которая запускается при изменении формы. который но обновляет состояние. но реакция дает мне ошибку.

VM2529 react_devtools_backend.js:4026 Warning: A component is changing a controlled input to be uncontrolled. This is likely caused by the value changing from a defined to undefined, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component.

Функция handleChangeEvent:

    let DefaultValue = {
        firsName: '',
        lastname: '',
        email: '',
        message: ''
    }

    const [output, setOutput] = useState(DefaultValue)

    const handleChangeEvent = (e) => {
        setOutput({ [e.target.name]: e.target.value });
    }

Спасибо за ваш ответ.

Я думаю, вы не публикуете достаточно кода, чтобы кто-либо мог рассмотреть вашу проблему.

namln-hust 15.05.2022 18:06
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
2
1
17
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий
setOutput({ [e.target.name]: e.target.value });

Это не будет объединено со старым состоянием, оно будет заменять старым состоянием. Поэтому, если они изменят lastName, новое состояние будет { lastName: "some string" }, а все остальные значения будут неопределенными.

Вместо этого вам нужно скопировать все остальные значения из старого состояния:

setOutput(prev => ({
  ...prev,
  [e.target.name]: e.target.value
});

Идеально все работает отлично. Я понял свою ошибку.

jonathan gleyze 15.05.2022 18:26

Другие вопросы по теме