javascript - 为什么我所在州的其他值被更改为未定义？

Question

知道为什么我的状态被更改为未定义吗？

整个情况是我启动我的状态:

const [state, setState] = useState({
email: '',
password: '',
loading: false,
errors: {}

然后这是更新电子邮件和密码字段的内容:

const handleChange = (event) => {
console.log("Target:",event.target)
console.log("Name:",event.target.name, "Value:", event.target.value)
setState({
  [event.target.name]: event.target.value
});
console.log("State after: ",state.email, state.password)

但问题是，一旦我将一个字符写入表单的字段之一，例如用户名，其他州的字段未定义，也许你可以解释这里的问题是什么？

附件是我的控制台截图和代码片段。

登录表单

控制台截图

Answer 1

问题在于，与类组件中的 this.setState(...) 不同，功能组件中的状态更新函数不会自动将旧状态与新状态合并。因此，将新状态与旧状态合并是您的工作。

来自 React Docs:

Note

Unlike the setState method found in class components, useState does not automatically merge update objects. You canreplicate this behavior by combining the function updater form withobject spread syntax

目前，您更新状态的方式会完全覆盖现有状态。为防止这种情况，您可以使用传播语法将现有状态与新状态合并。

setState({
  ...state,
  [event.target.name]: event.target.value
});