当我使用组件构建表单时，React组件不会重新渲染

Question

所以我有一个用于表单处理的组件：

import React, { useState } from "react";
export const useForm = (callback: any, initialState = {}) => {
const [values, setValues] = useState(initialState);
const onChange = (event: React.ChangeEvent<any>) => {
setValues({ ...values, [event.target.name]: event.target.value });
};
const onSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
event.preventDefault();
await callback();
};
return {
onChange,
onSubmit,
setValues,
values,
};
}

在我的组件中，我这样使用它：

const { id } = useParams();
const initialState = {
field1: "",
field2: "",
....
}
const { onChange, onSubmit, setValues, values } = useForm(
submitData,
initialState
);
useEffect(
() => {
if(id) {
getData().then((response) => {
setValues(response);
console.log(response);
console.log(values);
});
}
}
,[]);
async function getData() {
return await (await instance.get(url)).data;
}

useEffect钩子中的两个console.log不同，我不明白为什么。我使用了setValues，所以我希望重新绘制组件；值"；要用响应中的值更新的变量，但由于某种原因，它仍然具有initialState中的值。

为什么会发生这种情况，我该如何解决？

Answer 1

使用setState钩子的状态变化不会同步反映
这取自react文档：

setState((并不总是立即更新组件。它可能会批处理或推迟更新。这使得在调用setState((之后立即读取This.state成为一个潜在的陷阱。相反，使用componentDidUpdate或setState回调(setState(updater，callback((，这两种回调都保证在应用更新后激发。