Question

我定义状态

const [newOption, setNewOption] = useState({ name: "", age: 30 });

然后我要更新它。

<input
    type="text"
    value={newOption.name}
    onChange={(e) => setNewOption((prevState) => ({...prevState, name: e.target.value}))}
/>

但是我收到TypeError：开始输入时无法读取null的属性“值”

我需要通过活动，但是如何？

Answer 1

React使用已合并的Synthetic events。这意味着React会将事件对象重用于整个应用程序中的其他事件。为了做到这一点，一旦事件处理程序完成执行，React就会使事件对象无效（将事件对象的值设置为null）。由于setNewOption()是异步的，因此您的回调可以在 React无效后运行。这就是为什么您看到的原因：

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

由于React已经使事件对象无效，所以e.target的值为null。

解决此问题的一种方法是使用e.persist()，这将防止事件对象被池化和无效：

<input
    type="text"
    value={newOption.name}
    onChange={(e) => {
       e.persist();
       setNewOption((prevState) => ({...prevState, name: e.target.value}))
    }}
/>

React 17计划删除此行为，但是在以后的React版本中，您不必这样做。

Answer 2

简单地做到这一点：

<input
    type="text"
    value={newOption.name}
    onChange={(e) => setNewOption({ ...newOption, name: e.target.value })}
/>

Answer 3

要在react中更新状态对象，您还必须更新值并传递以前的状态。

例如：

setState(prevState => ({...prevState, name: value }))

如何在反应中更新状态对象？

3 个答案: