Formik+MUI如何将外部API返回值设置到输入框并通过表单校验

• enableReinitialize 配置未生效：虽然开启了该配置，但传给Formik的initialValues是固定写死的空值，没有把外部传入的batchValue合并进去，Formik初始化时内部存储的batchNo字段始终为空，自然会触发必填校验失败。
• 值与表单状态脱节：直接给TextField绑定了value={props.batchValue}，输入框显示的值和Formik内部维护的表单状态是两套独立数据，校验逻辑读取的是Formik内部状态，根本感知不到props传入的值。
• 同步逻辑触发时机错误：写在onChange里的setFieldValue只有用户手动输入内容时才会执行，组件首次挂载、props值传入时根本不会触发该回调，完全起不到初始化同步值的作用。

1. 基于props动态生成Formik的initialValues，把传入的batchValue合并到batchNo字段，让enableReinitialize可以在props变化时正确同步表单初始状态。
2. 去掉条件渲染两个TextField的冗余逻辑，统一渲染单个batchNo输入框：存在传入的batchValue时将输入框设为只读/禁用，直接使用Formik管理的字段值，不需要单独绑定props值到value属性。
3. 移除onChange里多余的手动setFieldValue逻辑，直接使用Formik提供的字段绑定方法对接MUI TextField，避免手动维护值同步逻辑出错。
4. 补充字段错误状态绑定，让校验提示可以正常展示。

修正后的表单组件代码如下：

import { Grid, Container, TextField, Button } from '@mui/material';
import { Formik, Form, Field } from 'formik';
import * as Yup from 'yup';

const valSchema = Yup.object().shape({
  batchNo: Yup.string().required('Required'),
  item: Yup.string().required('Required'),
  price: Yup.string().required('Required'),
});

// 基础初始值
const baseInitialValues = {
  batchNo: '',
  item: '',
  price: ''
};

const ItemForm = (props) => {
  // 合并props传入的batchValue生成动态初始值
  const initialValues = {
    ...baseInitialValues,
    batchNo: props.batchValue || ''
  };

  const localHandleSubmit = (values) => {
    // 原有提交逻辑
    console.log('提交表单值', values);
  };

  return (
    <Grid container>
      <Grid item xs={12}>
        <Container maxWidth="md">
          <div>
            <Formik
              enableReinitialize
              initialValues={initialValues}
              validationSchema={valSchema}
              onSubmit={(values) => {
                localHandleSubmit(values);
              }}
            >
              {({ dirty, isValid }) => (
                <Form>
                  <Grid container spacing={2}>
                    <Grid item xs={12}>
                      <Field
                        name="batchNo"
                        as={TextField}
                        label="Batch No"
                        fullWidth
                        // 存在传入值时设为只读，避免用户修改
                        InputProps={{
                          readOnly: !!props.batchValue
                        }}
                      />
                    </Grid>
                    <Grid item xs={6}>
                      <Field
                        name="item"
                        as={TextField}
                        label="Item"
                        fullWidth
                      />
                    </Grid>
                    <Grid item xs={6}>
                      <Field
                        name="price"
                        as={TextField}
                        label="Price"
                        fullWidth
                      />
                    </Grid>
                    <Grid item xs={12}>
                      <Button
                        fullWidth
                        variant="contained"
                        disabled={!isValid || !dirty}
                        type="submit"
                      >
                        ADD
                      </Button>
                    </Grid>
                  </Grid>
                </Form>
              )}
            </Formik>
          </div>
        </Container>
      </Grid>
    </Grid>
  );
};

外部调用逻辑无需修改，正常传入batchValue即可：

<DialogContent dividers>
  <FormComponent batchValue={batch} />
</DialogContent>

如果不想用Field组件，也可以通过useField钩子手动绑定字段属性，效果完全一致：

import { useField } from 'formik';

const [field] = useField('batchNo');
<TextField
  {...field}
  label="Batch No"
  fullWidth
  InputProps={{ readOnly: !!props.batchValue }}
/>

内容的提问来源于stack exchange，提问作者0x55b1E06FF