Блог

Я определяю состояние

 const [newOption, setNewOption] = useState({ name: "", age: 30 });
  

затем я хочу его обновить.

 <input
    type="text"
    value={newOption.name}
    onChange={(e) => setNewOption((prevState) => ({...prevState, name: e.target.value}))}
/>
  

но я получаю TypeError: не удается прочитать свойство ‘value’ null, когда я начинаю печатать

Мне нужно передать событие, но как?

React использует синтетические события, которые объединяются в пул. Это означает, что React будет повторно использовать объект event для других событий в вашем приложении. Для этого React обнулит ваш объект события (установит значения объекта события равными null), как только обработчик вашего события завершит выполнение. Поскольку setNewOption() он асинхронный, ваш обратный вызов может выполняться после того, как React аннулирует объект события. Вот почему вы видите:

Ошибка типа: не удается прочитать значение свойства null

поскольку React уже обнулил объект события, so e.target будет иметь значение null .

Одним из решений для исправления этого является использование e.persist() , которое предотвратит объединение и аннулирование объекта события:

 <input
    type="text"
    value={newOption.name}
    onChange={(e) => {
       e.persist();
       setNewOption((prevState) => ({...prevState, name: e.target.value}))
    }}
/>
  

React 17 планирует удалить это поведение, хотя в будущих версиях React вам не придется этого делать.

Просто сделайте это:

 <input
    type="text"
    value={newOption.name}
    onChange={(e) => setNewOption({ ...newOption, name: e.target.value })}
/>
  

Чтобы обновить объект состояния в react, вам также необходимо обновить значение и передать предыдущее состояние.

Примером этого может быть:

 setState(prevState => ({...prevState, name: value }))