使用钩子在对象上使用简单的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属性。在第一次击键时，它没有错误地正常工作，但是当我输入第二个字母时，我会遇到错误

未捕获的TypeError：无法读取null的属性“value”

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

警告：出于性能原因，将重复使用此合成事件。如果您看到这个，那么您将在已发布/无效的合成事件中访问target属性。这被设置为null。如果必须保留原始合成事件，请使用event.persist（）。有关更多信息，请参阅https：... // react-event-pooling。

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

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

Answer 1

必须在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 };
  });
};