使用钩子对对象进行简单的 setState

Question

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: Cannot read property 'value' of null

我可以知道空值来自哪一部分吗？从 chrome 控制台我看到下面的警告不确定它是否相关

Warning: This synthetic event is reused for performance reasons. If you're seeing this, you're accessing the property target on a released/nullified synthetic event. This is set to null. If you must keep the original synthetic event around, use event.persist(). See https:...//react-event-pooling for more information.

更新：如果我们没有在功能上使用 setState，那么它工作正常吗？

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

Answer 1

一个事件必须在 React 中同步处理。您可以在调用 setState:

之前从目标中提取 value

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 };
  });
};

使用钩子对对象进行简单的 setState

Simple setState on object using hooks

reactjs

react-hooks