Простое setState для объекта с использованием хуков - PullRequest
Новая
       22

Простое setState для объекта с использованием хуков

0 голосов
/ 04 апреля 2019 
const [state, setState] = useState({ city: '', country: '' });

const handleCityChange = event => {
  setState(prevState => {
    console.log(prevState);
    return { ...prevState, city: event.target.value };
  });
};

//...

<input
  type="text"
  placeholder="city"
  value={state.city}
  onChange={handleCityChange}
/>

Я пытаюсь удалить структуру prevState, которая является объектом, и обновить только свойство city.При первом нажатии клавиши все работает без ошибок, но как только я наберу вторую букву, я получу сообщение об ошибке

Uncaught TypeError: Невозможно прочитать свойство 'value' из null

Могу ли я узнать, из какой части исходит ноль?А из консоли chrome я вижу ниже предупреждение, не уверенное, связано ли оно

Предупреждение: это синтетическое событие повторно используется из соображений производительности.Если вы видите это, вы получаете доступ к свойству target в освобожденном / аннулированном синтетическом событии.Это установлено в ноль.Если вам нужно сохранить оригинальное синтетическое событие, используйте event.persist ().См. Https: ... // response-event-pooling для получения дополнительной информации.

ОБНОВЛЕНИЯ : Если мы не используем setState функционально, тогда он работает нормально?

const handleCityChange = event => {
  setState({ ...state, city: event.target.value });
};

1 Ответ

1 голос
/ 04 апреля 2019

Событие должно обрабатываться синхронно в React.Вы можете извлечь value из цели перед тем, как позвонить setState: 

const handleCityChange = event => {
  const { value } = event.target;
  setState(prevState => {
    return { ...prevState, city: value };
  });
};

Еще один способ сделать это - persist событие, и это может бытьиспользуется асинхронно. 

const handleCityChange = event => {
  event.persist();
  setState(prevState => {
    return { ...prevState, city: event.target.value };
  });
};
...