时间戳

首页 > 解决方案 > 使用钩子对对象进行简单的 setState

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

问题描述

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属性。在第一次击键时，它工作正常，没有错误，但是一旦我输入第二个字母，我就会出错

未捕获的类型错误：无法读取 null 的属性“值”

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

警告：出于性能原因，此合成事件被重用。如果您看到这一点，则表示您正在访问已target发布/无效合成事件的属性。这设置为空。如果您必须保留原始合成事件，请使用 event.persist()。有关更多信息，请参阅 https://react-event-pooling。

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

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

标签： reactjsreact-hooks

解决方案

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

推荐阅读