Reactjs 第二次输入后的一次更改效果

我对ReactJS有点陌生，我的

onChange

函数有一个问题，它在第二次输入后开始显示，每次延迟一个字母。我显然不明白为什么

这是我的密码：

const [values, setValues] = useState({
    latinName: "",
    wingLength: "",
    weight: "",
    adiposity: "",
    age: "",
    howCaptured: "",
    whenCaptured: "",
    whereCaptured: "",
    ringNumber: "",
    takeover: "",
});

const handleChange = (e) => {
    const { name, value } = e.target;

    setValues({
        ...values,
        [name]: value,
    });

    console.log(values);
}

<input type="text" name="latinName" id="latinName" onChange={handleChange} value={values.latinName} />

const[values，setValues]=useState({
拉丁名：“，
翼长：“，
重量：“，
肥胖：“，
年龄：“，
怎么说，
受聘时：，
其中：，
电话号码：“，
接管：“，
});
常数handleChange=（e）=>{
常量{name，value}=e.target；
设定值({
价值观
[名称]：值，
});
console.log（值）；
}

---

useState

hook的

setState

工作

async

。因此，在状态更新期间，您仍然可以同时获得以前的值

您可以在您的案例中使用

useffect

hook

useffect（（）=>console.log（值），[values]）

完整代码：

import { useEffect, useState } from "react";

export default function App() {
  const [values, setValues] = useState({
    latinName: "",
    wingLength: "",
    weight: "",
    adiposity: "",
    age: "",
    howCaptured: "",
    whenCaptured: "",
    whereCaptured: "",
    ringNumber: "",
    takeover: ""
  });

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

  const handleChange = (e) => {
    const { name, value } = e.target;

    setValues({
      ...values,
      [name]: value
    });
  };

  return (
    <input
      type="text"
      name="latinName"
      id="latinName"
      onChange={handleChange}
      value={values.latinName}
    />
  );
}


从“react”导入{useffect，useState}；
导出默认函数App（）{
const[values，setValues]=useState({
拉丁名：“，
翼长：“，
重量：“，
肥胖：“，
年龄：“，
怎么说，
受聘时：，
其中：，
电话号码：“，
接管：“
});
useffect（（）=>console.log（值），[values]）；
常数handleChange=（e）=>{
常量{name，value}=e.target；
设定值({
价值观
[名称]：值
});
};
返回(
);
}

setState
是异步的，因此您可以看到前面的值。如果它工作正常，我会更好地理解它的工作原理！谢谢：）不客气