Question

file not found
Job status: STOPPED

我试图破坏作为对象的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属性。第一次按键时，它工作正常，没有错误，但是，当我输入第二个字母时，我会遇到错误

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

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

警告：出于性能原因，此合成事件被重用。如果看到此消息，说明您正在访问已发布/无效的合成事件中的属性city。设置为空。如果必须保留原始的合成事件，请使用event.persist（）。有关更多信息，请参见https：... // react-event-pooling。

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

setState

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

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

1 个答案: