如何将外部状态值传入Yup验证Schema实现Formik字段动态必填校验

核心实现方式是将固定的校验Schema改写为接收外部状态作为入参的工厂函数，在父组件渲染时传入最新的状态动态生成对应规则的校验Schema即可：

1. 改造校验Schema文件 #

不要直接导出固定的Yup对象，改为导出一个工厂函数，外部状态通过函数参数传入：

// validationSchema.ts
import * as Yup from 'yup'

// 入参接收需要用到的外部状态
export const getValidationSchema = (someState: unknown) => Yup.object().shape({
  myField: Yup.string().test('required', 'Field is required', value => {
     if (someState) {
        // someState为真值时，要求字段不能为空
        return !!value
     } 
     // someState为假值时无需校验，直接通过
     return true
  })
})

2. 父组件中传入状态生成Schema #

在父组件内调用工厂函数，传入当前最新的状态值，将生成的Schema传给Formik即可：

// 父组件代码
import { useState, useMemo } from 'react'
import { Formik, Form } from 'formik'
import { getValidationSchema } from './validationSchema.ts'

const MyComponent = () => {
  const [someState, setState] = useState()
  // 可选优化：用useMemo缓存Schema，仅someState变化时重新生成
  const validationSchema = useMemo(() => {
    return getValidationSchema(someState)
  }, [someState])

  return (
    <Formik
      initialValues={{ myField: '' }}
      validationSchema={validationSchema}
      onSubmit={(values) => {
        // 提交逻辑
        console.log(values)
      }}
    >
      <Form>
        {/* 表单字段实现 */}
      </Form>
    </Formik>
  )
}

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