如何在预定义的Yup Schema中使用动态属性名？

直接通过遍历目标数组，为每个元素生成对应的Yup验证规则，再合并成完整的Schema即可实现需求，具体步骤如下：

1. 构建动态验证规则对象 #

先定义包含目标属性名的数组，然后遍历数组，将每个属性名作为键，绑定对应的验证规则到对象中：

import * as Yup from 'yup';

// 你的属性名数组
const myArray = ['name1', 'name2'];

// 初始化空对象用于存储动态验证规则
const dynamicValidationFields = {};

// 遍历数组生成每个属性的验证规则
myArray.forEach(field => {
  dynamicValidationFields[field] = Yup.string().required('必填');
});

2. 生成最终的验证Schema #

将上面构建的动态规则对象传入Yup.object().shape()，得到可直接用于Formik的Schema：

export const dynamicSchema = Yup.object().shape(dynamicValidationFields);

3. 在Formik中使用该Schema #

直接将生成的dynamicSchema传入Formik组件的validationSchema属性：

import { Formik, Form, Field } from 'formik';
import { dynamicSchema } from './path-to-your-schema';

function MyForm() {
  // 初始化表单值，需和动态属性名对应
  const initialValues = myArray.reduce((acc, field) => {
    acc[field] = '';
    return acc;
  }, {});

  return (
    <Formik
      initialValues={initialValues}
      validationSchema={dynamicSchema}
      onSubmit={(values) => {
        console.log('提交的值：', values);
      }}
    >
      {({ errors, touched }) => (
        <Form>
          {myArray.map(field => (
            <div key={field}>
              <Field name={field} placeholder={`请输入${field}`} />
              {errors[field] && touched[field] && <div>{errors[field]}</div>}
            </div>
          ))}
          <button type="submit">提交</button>
        </Form>
      )}
    </Formik>
  );
}

export default MyForm;

如果需要给不同属性设置不同的验证规则，只需调整遍历逻辑即可，比如把数组改成包含字段名和对应规则的对象数组，再针对性绑定规则。

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