如何引发复杂对象的错误？

Question

当我抛出 SubmissionError 或使用 { _error: "...."} 调用 stopSubmit 时，_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 字段，那么为什么不标准化您传递的数据呢？您始终可以将所有内容转换为数组或特定的对象结构。以下是一些基本示例：

// 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 的工作方式，图书馆有责任处理用户输入。然而，更重要的事情（对我来说）是你处理错误呈现的方式，因为在这里正确呈现错误只是你的责任。在这里您可以利用 using types 并期望特定的错误类型（例如 Array）。

也可以选择将 SubmissionError 包装在您自己的 class 中。以这种方式，TypeScript 将要求您始终传递相同类型的 _error.

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

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

如何引发复杂对象的错误？

How to raise an error with complex object?

typescript

redux-form