如何将API的响应写入Formik表单中？
P粉546257913
2023-08-17 17:33:34
<p>如何将API的响应写入到Formik中？
我有一个API，通过它我接收数据，这些数据与我的表单完全一致，我该如何立即将整个响应写入，而不是使用多个setFieldValue行？</p>
<pre class="brush:php;toolbar:false;">const form = useFormik({
initialValues: {
name: "",
login: "",
about: {
age: "",
rank: {
silver: true,
gold: false,
global: false
}
}
}
}); // 我的初始表单
const {
values,
handleChange,
setFieldValue,
} = form;
useEffect(() => {
if (!isEmpty(projectData)) {
Object?.keys(projectData)?.map((item: any, idx: number) => {
const key: any = Object.keys(item).at(-1);
setFieldValue(key, item[key]);
});
}
}, [projectData]); // 设置API的响应</pre>
你需要设置
enableReinitialize来允许Formik在更改时更新值。const form = useFormik({ initialValues: ..., enableReinitialize: true //<-- 这里 });你也可以在
useEffect中一次性直接设置值。useEffect(() => { if (projectData && .../*其他条件*/) { form.setValues(projectData) } }, [projectData])如果从API接收到的数据的结构与表单的结构相匹配，您可以使用
setValues方法一次性设置整个状态。确保来自API响应的数据结构（
projectData）与您的initialValues的结构相匹配。使用
setValues方法一次性更新所有值。const form = useFormik({ initialValues: { name: "", login: "", about: { age: "", rank: { silver: true, gold: false, global: false } } } }); const { setValues } = form; useEffect(() => { if (projectData) { setValues(projectData); } }, [projectData]); // 设置来自API的响应