Remix.run 关于 HTTP 错误状态的弹出 Toast 消息

Question

想知道当服务器从 ActionFunction 返回错误响应时，推荐的方法是触发弹出 Toast 消息（保持 UI 的其余部分完好无损）？我意识到我可以使用 CatchBoundary，但这将替换该组件，所以我只需要将该组件嵌入到 catch 边界内并添加一个 toast 组件吗？感觉很笨重。有没有什么方法可以简单地获取我的主要组件中的响应状态，类似于 useCatch() ？

Answer 1

您可以从您的操作返回数据并useActionData获取它。

export function action() {
  if (someError) {
    return json({error: 'oops'})
  }
}
export default function() {
  const data = useActionData()
  return (
    {data?.error ? <Toast message={date.error} /> : null }
  )
}