如何访问“transformErrors”中的输入值答案

【问题标题】：How to access input value inside `transformErrors`如何访问“transformErrors”中的输入值
【发布时间】：2021-09-17 18:00:57
【问题描述】：

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

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

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

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 中直接对其进行变异，这是我期望的.

还有哪些其他可能的访问字段值的方法？也许可以配置（或patch）ajv 验证器以将值附加到验证错误的参数？

【问题讨论】：

标签： reactjs validation jsonschema ajv react-jsonschema-forms

【解决方案1】：

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

可以这样传递：

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

其中validate 是一个将formData 和errors 作为参数的函数。

见documentation here

【讨论】：

我真的希望我可以使用它，但是在玩了validate 之后，我很遗憾地说它在这里似乎没有用:( validate 确实可以访问对表单数据，而不是对自动验证检测到的实际错误。validate 的errors 参数只是一个 empty schema 形的树结构我可以附加新错误，但不能访问现有错误。似乎没有办法将数据从validate 传递到transformErrors，反之亦然（对我来说都足够了）。不过，谢谢你的想法，绝对值得一试！

【解决方案2】：

好的，我找到了实现我想要的方法，但它太老套了，我想我不想使用它。将上述道具突变技巧与对消息使用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} 
    />
  )
}

【讨论】：