Formik 默认值 UseEffect

Question

我正在尝试使用 JSON 数据预填充 Formik。 数据显示正常并返回。 我有两个问题。

我使用 ASP.NET Core 作为后端。 我应该使用 values 还是 initialValues 作为变量？ 当我使用 initialValues 时，我得到分配字段。 标签仍然填充。

在我发送默认值后，标签仍然存在。 所有字段都是只读的，我无法编辑它们：

这是我的代码：

 function OrdersToReporting() { const [initialValues, setInitialValues] = useState<OrdersToReportingViewModels>({ }); useEffect(() => { agent.Settings.getOrdersSettings().then((userList) => { let solutionName = (new URLSearchParams(window.location.search)).get("SolutionName"); let solutionWebsite = (new URLSearchParams(window.location.search)).get("SolutionWebsite"); userList.data.SolutionName = solutionName; userList.data.SolutionWebsite = solutionWebsite; setInitialValues(userList.data); }); }, []); const handleSubmit = async ( values: any, { resetForm, setErrors, setStatus, setSubmitting }: any ) => { try { await timeOut(1500); agent.Settings.saveOrdersSettings(values); resetForm(); setStatus({ sent: true }); setSubmitting(false); } catch (error: any) { setStatus({ sent: false }); setErrors({ submit: error.message }); setSubmitting(false); } }; return ( <Formik initialValues={initialValues} validationSchema={validationSchema} onSubmit={handleSubmit} > {({ errors, handleBlur, handleChange, handleSubmit, isSubmitting, touched, values, status, }) => ( {isSubmitting? ( <Box display="flex" justifyContent="center" my={6}> <CircularProgress /> </Box> ): ( <form onSubmit={handleSubmit}> <Grid container spacing={6}> <Grid item md={6}> <TextField name="SolutionName" label="Solution Name" value={initialValues.SolutionName} fullWidth onBlur={handleBlur} onChange={handleChange} variant="outlined" my={2} /> <TextField name="SolutionWebsite" label="Solution Website" value={initialValues.SolutionWebsite} fullWidth onBlur={handleBlur} onChange={handleChange} variant="outlined" my={2} /> <TextField name="lastDownloadUtc" label="Last Download Date Start" value={initialValues.LastDownloadUtc} fullWidth onBlur={handleBlur} onChange={handleChange} variant="outlined" my={2} /> </Grid> <Grid item md={6}> <TextField name="lastDownloadUtcEnd" label="Last Download Date End" value={initialValues.LastDownloadUtcEnd} fullWidth onBlur={handleBlur} onChange={handleChange} variant="outlined" my={2} /> </Grid> </Grid> <Button type="submit" variant="contained" color="primary" mt={3} > Save changes </Button> </form> )} )} </Formik> ); }

Answer 1

对于你的问题，

1. 您应该使用initialValues为您的字段分配默认值。

   由于您是从某个 function 获取数据，因此设置 initialValues 可能会有延迟。 所以在 formik 道具中传递enableReinitialize={true} 。

2. 您无法更改这些值，因为您设置了

   value={initialValues.fieldName} // always value will be this unless you change initialValues state

   对于每个文本字段。 即使您进行编辑，这也始终是相同的。

   只需删除 value 属性， formik将默认处理它。