我有一個用 Formik 構建的表單。表單有一個初始輸入框，用戶應該在其中輸入他的用戶名，如果用戶名有效，那么 API 將回傳用戶的后續詳細資訊，我需要在表單中進一步預先填寫。
有沒有更好的方法在 Formik 中處理它。我探索并發現我可以使用initialValues但我需要稍后初始化它。
表單如下所示，但有更多細節要顯示
此外，如果用戶沒有用戶名，那么我們也可以讓用戶手動輸入詳細資訊并單擊提交。
我嘗試了以下方法，但現在我認為這不是問題的最佳解決方案，請您幫我處理此類用例
const response = useQuery(username,{skip});
const userData: any = response?.data;
const formikRef = useRef<FormikProps<FormikValues>>(null);
React.useEffect(() => {
if (userData) {
formikRef.current?.setFieldValue("name", userData.name);
formikRef.current?.setFieldValue("detail1",userData.detail1);
formikRef.current?.setFieldValue("detail2",userData.detail2);
}
}, [agreementLineData]);
return (
<Formik
innerRef={formikRef}
initialValues={{
username: "",
name: "",
detail1: "",
detail2: ""
}}
onSubmit={(values) => {})
{({ values, submitForm, setFieldValue }) => {
return (
<Form>
<FormField label="Username">
<Input value={values.username}/>
<Button variant="primary">Validate</Button>
</FormField>
<FormField label="Name">
<Input value={values.name} onChange={(e) => {}}/>
</FormField>
<FormField label="Details 1">
<Input value={values.detail1} disabled={true}/>
</FormField>
<FormField label="Details 2">
<Input value={values.detail2} disabled={true}/>
</FormField>
</Form>
</Formik>
)
uj5u.com熱心網友回復：
最好使用initialValuesFormik 來填充表單的輸入，而不是每個都使用setFieldValue.
您需要做的就是添加enableReinitialize道具。
initialValues每當您更新時，它將重新初始化表單。這樣，您的值將被正確填充。
只是玩，initialValues你應該很好去。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/524583.html
標籤：反应形式rtk-查询