0

在transformErrors回调中映射错误时，我需要知道相关输入的实际值。

我需要这个来创建一个系统，用于将多种现有格式组合成新的复合格式。我想将输入值与每种“基本”格式相匹配，并为失败的格式显示错误。allOf不幸的是，由于我的项目非常具体的原因，编写格式的方法对我不起作用。

tranformErrors我尝试通过currying和直接读取数据将表单数据注入我的回调：

import _ from 'lodash'
import Form from '@rjsf/core'

const makeTransformErrors = formData => errors => {
  errors.forEach(error => {
    if (error.name === 'format') {
      const value = _.get(formData, error.property)
      // ...
    }
  })
}

const WrapedForm = (formData, ...rest) => {
  const transformErrors = makeTransformErrors(formData)
  return (
    <Form 
      transformErrors={transformErrors} 
      formData={formData}
      {...rest} 
    />
  )
}

但是这种方式value比表单的实际状态落后一个击键，这是我所期望的。不幸的是，即使我不直接传入，这也不起作用formData，makeTransformErrors而是我传入一个包含formData并直接在 Forms 中直接改变它的对象onChange，这是我期望的。

访问字段值的其他可能方式是什么？也许可以配置（或修补） ajv 验证器以将值附加到验证错误的参数？

4

2 回答 2

1

不确定您正在尝试执行哪种错误验证，但您是否尝试过使用validate？

它可以这样传递：

 <Form .... validate={validate} />

where是一个以和validate为参数的函数。formDataerrors

在此处查看文档

于 2021-09-17T18:27:52.470 回答
0

好的，我找到了一种实现我想要的方法，但是它太老套了，我想我不想使用它。将上述道具突变技巧与对消息使用getter相结合时，我可以获得最新值，将评估推迟到实际读取消息之前，这恰好足够了：

import _ from 'lodash'
import Form from '@rjsf/core'

const makeTransformErrors = formDataRef => errors => {
  return errors.map(error => {
    if (error.name !== 'format') return error
      
    return {
      ...error,
      get message() {
        const value = _.get(propPath, formDataRef.current) // WORKS! But at what cost...
      }
    }
  })
}

const WrapedForm = (formData, onChange, ...rest) => {
  const formDataRef = React.useRef(formData)

  const transformErrors = makeTransformErrors(formDataRef)

  handleChange = (params) => {
    formDataRef.current = params.formData
    onChange(params)
  }

  return (
    <Form 
      transformErrors={transformErrors} 
      onChange={handleChange}
      formData={formData}
      {...rest} 
    />
  )
}
于 2021-09-17T18:33:37.320 回答