HTTP状态下的Remix.run弹出吐司消息

Question

不知道当服务器从ActionFunction返回错误响应时，建议的方法是触发弹出吐司消息(保持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 }
  )
}