Javascript UseEffect显示不适当的值，但仅显示一次

每当我更改密码时（使用useffecthook），我都试图打印状态值

value

。尽管它工作正常，但每当我尝试更改

电子邮件时，
电子邮件的值也会在控制台中呈现

useEffect(() => {
    console.log(values);
  }, [values.password]);

但是，根据我的逻辑，只有当
密码
的值更改时，才应该呈现

下面是日志

当我更改
email

下面是我的代码

Form.js

import { useState } from "react";

export const useForm = (initialValues) => {
  const [values, setValues] = useState(initialValues);

  return [
    values,
    (e) => {
      setValues({
        //...values,
        [e.target.name]: e.target.value,
      });
    },
  ];
};

import "./App.css";
import { useState, useEffect } from "react";
import { useForm } from "./Form";

const App = () => {
  const [values, handelChange] = useForm({ email: "", password: "" });

  useEffect(() => {
    console.log(values);
  }, [values.password]);

  return (
    <div className="field">
      <input
        type="email"
        name="email"
        value={values.email}
        onChange={handelChange}
      />
      <input
        type="password"
        name="password"
        value={values.password}
        onChange={handelChange}
      />
    </div>
  );
};

export default App;

App.js

import { useState } from "react";

export const useForm = (initialValues) => {
  const [values, setValues] = useState(initialValues);

  return [
    values,
    (e) => {
      setValues({
        //...values,
        [e.target.name]: e.target.value,
      });
    },
  ];
};

import "./App.css";
import { useState, useEffect } from "react";
import { useForm } from "./Form";

const App = () => {
  const [values, handelChange] = useForm({ email: "", password: "" });

  useEffect(() => {
    console.log(values);
  }, [values.password]);

  return (
    <div className="field">
      <input
        type="email"
        name="email"
        value={values.email}
        onChange={handelChange}
      />
      <input
        type="password"
        name="password"
        value={values.password}
        onChange={handelChange}
      />
    </div>
  );
};

export default App;

导入“/App.css”；
从“react”导入{useState，useffect}；
从“/Form”导入{useForm}；
常量应用=（）=>{
const[values，handelChange]=useForm（{email:，密码：}）；
useffect（（）=>{
console.log（值）；
}，[values.password]）；
返回(
);
};
导出默认应用程序；
您唯一需要更改的是删除已注释的
值
-在您的
useForm
-钩子中进行析构函数：

返回[
价值观
（e） =>{
设定值({
…值，//从问题中的代码中删除注释！！
[e.target.name]：e.target.value，
});
},
];
};

注释会导致从每个电子邮件输入的新
值
-对象中删除密码（您可以在值上调用prop
密码
，但您会得到
未定义的
）。在日志中，您可以看到，但正如您所描述的，仅一次

此外，我会将您的
useForm
-hook更改为：

const useForm=（初始值）=>{
const[values，setValues]=useState（初始值）；
返回[
价值观
（e） =>{
设置值（prevValues=>{
返回{
…价值观，
[e.target.name]：e.target.value，
}
});
}
];
};

如果使用前一个状态计算新状态，则应使用params中的前一个状态。React状态更新可以成批进行，不以这种方式写入更新可能会导致意外结果。
为什么要注释掉这行：
/…值，
？因为目前我不希望传递以前的值，但您知道，当您更改
密码时：“Pass”
为
未定义的
，这也是对
[values.password]
的更改，因此
useffect
会被触发。@Thomas这意味着当我试图更改电子邮件的值时，密码的值被设置为“undefined”|谢谢，我会从下次开始处理它。