如何在Formik initialValues中添加动态键适配批量映射输入？

1. 生成动态字段的初始值 #

由于你的输入字段是通过bodyTypes和washTypes映射生成的，需要先根据这两个数组动态生成对应初始值对象，再合并到原有静态初始值中：

// 生成动态字段的初始值
const generateDynamicInitialValues = () => {
  const dynamicValues: Record<string, string | number> = {};
  bodyTypes.forEach(bodyType => {
    washTypes.forEach(washType => {
      const fieldKey = `body${bodyType.id}-wash${washType.id}`;
      // 初始值可从serviceData取默认值，或设为空/0
      dynamicValues[fieldKey] = serviceData[fieldKey]?.price || "";
    });
  });
  return dynamicValues;
};

// 合并静态与动态初始值
const formInitialValues = {
  ...LAUNDRY_FORM_INITIAL_VALUES,
  ...generateDynamicInitialValues()
};

2. 绑定动态输入字段到Formik #

修改动态Input组件，补充Formik的onChange、onBlur绑定，错误提示逻辑和静态字段保持一致：

{bodyTypes.map((bodyType: ICarBodyType) => (
  <Flex key={bodyType.id} mt={"20px"} flexDirection={"column"} >
    {washTypes.map((washType) => {
      const fieldName = `body${bodyType.id}-wash${washType.id}`;
      return (
        <Input
          key={`${bodyType.id}-${washType.id}`}
          name={fieldName}
          value={values[fieldName]}
          onChange={handleChange}
          onBlur={handleBlur}
          styles={{ width: "100%", height: "60px" }}
          error={Boolean(errors[fieldName] && touched[fieldName])}
          errorMessage={errors[fieldName] as string}
        />
      );
    })}
  </Flex>
))}

3. 动态生成验证规则（以Yup为例） #

如果使用Yup做表单验证，同样需要动态生成对应字段的验证规则，合并到静态规则中：

import * as Yup from 'yup';

// 生成动态验证规则
const generateDynamicValidationSchema = () => {
  const dynamicSchema: Record<string, Yup.AnySchema> = {};
  bodyTypes.forEach(bodyType => {
    washTypes.forEach(washType => {
      const fieldKey = `body${bodyType.id}-wash${washType.id}`;
      // 根据业务需求设置验证规则，比如必填、数字校验等
      dynamicSchema[fieldKey] = Yup.number()
        .required('价格不能为空')
        .min(0, '价格不能为负数');
    });
  });
  return dynamicSchema;
};

// 合并静态与动态验证规则
const validationSchema = Yup.object().shape({
  // 静态字段验证规则示例
  phone: Yup.string()
    .required('手机号不能为空')
    .matches(/^1[3-9]\d{9}$/, '手机号格式不正确'),
  // 其他静态字段验证规则...
  ...generateDynamicValidationSchema()
});

4. 初始化Formik组件 #

将合并后的初始值和验证规则传入Formik即可：

<Formik
  initialValues={formInitialValues}
  validationSchema={validationSchema}
  onSubmit={(values) => {
    // 提交逻辑，values将包含所有静态和动态字段的值
    console.log(values);
  }}
>
  {({ values, handleChange, handleBlur, errors, touched, handleSubmit }) => (
    <form onSubmit={handleSubmit}>
      {/* 静态输入字段 */}
      {/* 动态输入字段 */}
      <button type="submit">提交</button>
    </form>
  )}
</Formik>

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