Question

当我抛出SubmissionError或使用stopSubmit致电{ _error: "...."}时，_error属性为string（从文档和TypeScript定义中找到），但如果我想发送一个复杂的对象或一个字符串数组（表单提交可能有很多错误，不能总是将它们简化为一个简单的字符串。）。

在这些情况下我应该做些什么？

我意识到没有什么真的阻止我将任何我想要的内容分配给_error属性但是TypeScript抱怨并且我认为应该有这样做的正确方法。

Answer 1

我知道案件更具体针对TypeScript。我会分享一些想法和建议，所以我希望他们会帮助你并给你见解！

我是这样做的（没有 TypeScript），尽可能简单：

// Throw a single error string, somewhere in my form submission handler
throw new SubmissionError({
  _error: 'Wrong username'
})

// Throw multiple errors, , somewhere in my form submission handler
throw new SubmissionError({
  _error: ['Wrong username', 'Wrong email']
})

// Errors handling & rendering
const handleErrors = error => Array.isArray(error) ? error.map(renderError) : renderError(error)
const renderError = error => <div>{error}</div> 

// Form component
const Form = ({ error, handleSubmit, children }) => (
  <form onSubmit={handleSubmit}>
    {error && handleErrors(error) }
    {children}
  </form>
)

建议（ TypeScript）：

我知道TypeScript期望始终将相同类型的数据传递到_error字段，那么为什么不标准化您传递的内容？您始终可以将所有内容转换为Array或特定的Object结构。以下是一些基本示例：

// Single error string, convert it to Array
throw new SubmissionError({
  _error: ['Wrong username']
})

// Multiple errors, just pass the Array
throw new SubmissionError({
  _error: ['Wrong username', 'Wrong email']
})

正如您已经说过的那样，您没有受到保护，无法将任何内容传递给_error，但这就是库API的工作原理，图书馆负责处理用户输入。但是，对我来说更重要的是处理错误渲染的方式，因为在这里只负责正确渲染错误。在这里，您可以利用类型并期望特定的错误类型（例如Array）。

此外，还可以选择将SubmissionError包装在您自己的班级中。以这种方式执行此操作，TypeScript将要求您始终传递相同类型的_error。

我想你知道，但_error的关键目的是将顶级（通用）错误传递给表单。如果要将错误传递给特定表单字段，则必须按以下方式传递错误：

throw new SubmissionError({
  // field name
  username: ['It should not be empty']
})

如何使用复杂对象引发错误？

1 个答案: