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

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 的内容传递给 _error，但这就是库 API 的工作方式，并且库有责任处理用户输入。然而，更重要的事情(对我来说)是你处理错误呈现的方式，因为在这里正确呈现错误只是你的责任。在这里您可以利用 using types 并期望特定的错误类型(例如数组)。

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

---

我想您知道，但是 _error 的主要目的是将顶级(一般)错误传递给表单。如果您想将错误传递给特定的表单域，则必须按以下方式传递:

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