如何修复Remix错误：必须在数据路由器内使用useFetcher？

huangapple
go评论107阅读模式
英文:

How do I fix the Remix Error: useFetcher must be used within a data router?

问题

这是您提供的文本的中文翻译：

"我是 Remix 的新手（也是后端编程的新手），在解决问题时感到很迷茫。我正在尝试使用 UseFetcher 允许在“类似待办事项”的应用程序中进行非导航数据的变化。Remix 文档并没有明确说明我需要在数据路由中使用它，示例也没有帮助我搞清楚。

以下是我在 root.tsx 中的 App 组件的样子：

  1. export default function App() {
  2.   return (
  3.     <html lang="en" className="h-full">
  4.       <head>
  5.         <Meta />
  6.         <Links />
  7.       </head>
  8.       <body className="h-full">
  9.         <Outlet />
  10.         <ScrollRestoration />
  11.         <Scripts />
  12.         <LiveReload />
  13.       </body>
  14.     </html>
  15.   );
  16. }

以及用于显示项目列表的 routes/goods.tsx（其中大部分是从默认的 Indie Stack 改编的）：

  1. export async function action({ request }: ActionArgs) {
  2.   const formData = await request.formData();
  3.   const title = formData.get("title");
  4.   const id = formData.get("id");
  6.   if (typeof title !== "string" || title.length === 0) {
  7.     return json(
  8.       { errors: { title: "Title is required" } },
  9.       { status: 400 }
  10.     );
  11.   }
  13.   const good = await updateGood({ title, id });
  15.   return null;
  16. }
  18. export default function GoodsPage() {
  19.   const data = useLoaderData<typeof loader>();
  20.   const user = useUser();
  22.   return (
  23.     <div className="flex h-full min-h-screen flex-col">
  24.       <Outlet />
  25.       <main className="flex h-full bg-white">
  26.         <div className="h-full w-80 border-r bg-gray-50">
  27.           {data.completedGoodListItems.length === 0 ? (
  28.             <p className="p-4">No goods yet</p>
  29.           ) : (
  30.             <>
  31.               <h2>Incomplete</h2>
  32.               <ol>
  33.                 {data.completedGoodListItems.map((good) => (
  34.                   <GoodItem key={good.id} good={good}></GoodItem>
  35.                 ))}
  36.               </ol>
  37.             </>
  38.           )}
  39.           <>
  40.             <h2>Completed</h2>
  41.             <ol>
  42.               {data.incompleteGoodListItems.map((good) => (
  43.                 <GoodItem key={good.id} good={good}></GoodItem>
  44.               ))}
  45.             </ol>
  46.           </>
  47.         </div>
  48.         <Form action="/logout" method="post">
  49.           <button
  50.             type="submit"
  51.             className="rounded bg-slate-600 py-2 px-4 text-blue-100 hover:bg-blue-500 active:bg-blue-600"
  52.           >
  53.             Logout
  54.           </button>
  55.         </Form>
  56.       </main>
  57.     </div>
  58.   );
  59. }
  61. function GoodItem({ good }) {
  62.   const fetcher = useFetcher();
  64.   return (
  65.     <li>
  66.       <fetcher.Form method="post">
  67.         <input type="text" defaultValue={good.title}></input>
  68.       </fetcher.Form>
  69.     </li>
  70.   );
  71. }

这导致了错误：Error: useFetcher must be used within a data router.

然后我尝试遵循将 App 封装在数据路由内的说明，使用 createBrowserRouter 编写了我的 root.tsx 中的以下代码：

  1. async function loader({ request }: LoaderArgs) {
  2.   return json({
  3.     user: await getUser(request),
  4.   });
  5. }
  7. const router = createBrowserRouter([
  8.   {
  9.     path: "/",
  10.     element: <App />,
  11.     // loader: rootLoader,
  12.     children: [
  13.       {
  14.         path: "/goods",
  15.         element: <GoodsPage />,
  16.         // loader: loaderName,
  17.       },
  18.     ],
  19.   },
  20. ]);
  22. // @ts-ignore
  23. ReactDOM.createRoot(document.getElementById("root")).render(
  24.   <RouterProvider router={router} />
  25. );
  27. export default function App() {
  28.   return (
  29.     <html lang="en" className="h-full">
  30.       <head>
  31.         <Meta />
  32.         <Links />
  33.       </head>
  34.       <body className="h-full">
  35.         <Outlet />
  36.         <ScrollRestoration />
  37.         <Scripts />
  38.         <LiveReload />
  39.       </body>
  40.     </html>
  41.   );
  42. }

我不知道为每个元素添加什么加载程序。我尝试将异步加载程序分配给一个常量，并将其添加到路由的构造函数中，但是收到错误：The expected type comes from property 'loader' which is declared here on type 'RouteObject'，所以我将它留空了。

这段代码导致了 ReferenceError: document is not defined 的错误，这显然是因为我没有正确使用此路由的语法或结构。有人可以提供关于我在这种情况下应该如何使用 createBrowserRouter 的指导吗？我知道我需要以某种方式使用 RouterProvider 组件，但我没有足够的经验来看出前进的路径。我在这里漏掉了什么？"

请注意，这是您提供的文本的中文翻译，如果您需要进一步的帮助或有任何问题，请随时提出。

英文:

I'm new to Remix (and backend programming in general) and feeling lost troubleshooting this. I'm trying to UseFetcher to allow for non-navigational data mutations in a "todo-like" application. Remix docs doesn't explicitly say I need to be using it within a data router, and the examples don't clear up my confusion at all.

Here's what my App component looks like in root.tsx:

  2. export default function App() {
  3. return (
  4. &lt;html lang=&quot;en&quot; className=&quot;h-full&quot;&gt;
  5. &lt;head&gt;
  6. &lt;Meta /&gt;
  7. &lt;Links /&gt;
  8. &lt;/head&gt;
  9. &lt;body className=&quot;h-full&quot;&gt;
  10. &lt;Outlet /&gt;
  11. &lt;ScrollRestoration /&gt;
  12. &lt;Scripts /&gt;
  13. &lt;LiveReload /&gt;
  14. &lt;/body&gt;
  15. &lt;/html&gt;
  16. );
  17. }

And my routes/goods.tsx for displaying a list of items (much of this is adapted from the default Indie Stack):

  2. export async function action({ request }: ActionArgs) {
  3. const formData = await request.formData();
  4. const title = formData.get(&quot;title&quot;);
  5. const id = formData.get(&quot;id&quot;);
  6. if (typeof title !== &quot;string&quot; || title.length === 0) {
  7. return json(
  8. { errors: { title: &quot;Title is required&quot; } },
  9. { status: 400 }
  10. );
  11. }
  12. const good = await updateGood({ title, id });
  13. return null;
  14. }
  15. export default function GoodsPage() {
  16. const data = useLoaderData&lt;typeof loader&gt;();
  17. const user = useUser();
  18. return (
  19. &lt;div className=&quot;flex h-full min-h-screen flex-col&quot;&gt;
  20. &lt;Outlet /&gt;
  21. &lt;main className=&quot;flex h-full bg-white&quot;&gt;
  22. &lt;div className=&quot;h-full w-80 border-r bg-gray-50&quot;&gt;
  23. {data.completedGoodListItems.length === 0 ? (
  24. &lt;p className=&quot;p-4&quot;&gt;No goods yet&lt;/p&gt;
  25. ) : (
  26. &lt;&gt;
  27. &lt;h2&gt;Incomplete&lt;/h2&gt;
  28. &lt;ol&gt;
  29. {data.completedGoodListItems.map((good) =&gt; (
  30. &lt;GoodItem key={good.id} good={good}&gt;&lt;/GoodItem&gt;
  31. ))}
  32. &lt;/ol&gt;
  33. &lt;/&gt;
  34. )}
  35. &lt;&gt;
  36. &lt;h2&gt;Completed&lt;/h2&gt;
  37. &lt;ol&gt;
  38. {data.incompleteGoodListItems.map((good) =&gt; (
  39. &lt;GoodItem key={good.id} good={good}&gt;&lt;/GoodItem&gt;
  40. ))}
  41. &lt;/ol&gt;
  42. &lt;/&gt;
  43. &lt;/div&gt;
  44. &lt;Form action=&quot;/logout&quot; method=&quot;post&quot;&gt;
  45. &lt;button
  46. type=&quot;submit&quot;
  47. className=&quot;rounded bg-slate-600 py-2 px-4 text-blue-100 hover:bg-blue-500 active:bg-blue-600&quot;
  48. &gt;
  49. Logout
  50. &lt;/button&gt;
  51. &lt;/Form&gt;
  52. &lt;/main&gt;
  53. &lt;/div&gt;
  54. );
  55. }
  56. function GoodItem ({ good }) { 
  57. const fetcher = useFetcher();
  58. return (
  59. &lt;li&gt;
  60. &lt;fetcher.Form method=&quot;post&quot;&gt;
  61. &lt;input type=&quot;text&quot; defaultValue={good.title}&gt;&lt;/input&gt;
  62. &lt;/fetcher.Form&gt;
  63. &lt;/li&gt;
  64. )}

This results in Error: useFetcher must be used within a data router.

So then I try to follow the instructions for encapsulating the App within a data router using createBrowserRouter which leads me to writing this code in my root.tsx:

  1. async function loader({ request }: LoaderArgs) {
  2. return json({
  3. user: await getUser(request),
  4. });
  5. }
  6. const router = createBrowserRouter([
  7. {
  8. path: &quot;/&quot;,
  9. element: &lt;App /&gt;,
  10. // loader: rootLoader,
  11. children: [
  12. {
  13. path: &quot;/goods&quot;,
  14. element: &lt;GoodsPage /&gt;,
  15. // loader: loaderName,
  16. },
  17. ],
  18. },
  19. ]);
  20. // @ts-ignore
  21. ReactDOM.createRoot(document.getElementById(&quot;root&quot;)).render(
  22. &lt;RouterProvider router={router} /&gt;
  23. );
  24. export default function App() {
  25. return (
  26. &lt;html lang=&quot;en&quot; className=&quot;h-full&quot;&gt;
  27. &lt;head&gt;
  28. &lt;Meta /&gt;
  29. &lt;Links /&gt;
  30. &lt;/head&gt;
  31. &lt;body className=&quot;h-full&quot;&gt;
  32. &lt;Outlet /&gt;
  33. &lt;ScrollRestoration /&gt;
  34. &lt;Scripts /&gt;
  35. &lt;LiveReload /&gt;
  36. &lt;/body&gt;
  37. &lt;/html&gt;
  38. );
  39. }

I didn't know what to add for the loaders for each element. I tried assigning the async loader to a const and adding it into the constructor for router, but I received the error: The expected type comes from property 'loader' which is declared here on type 'RouteObject' so I just left it blank.

This code results in ReferenceError: document is not defined certainly because I don't have the syntax or structure correct for this router. Can someone provide some guidance on how I should be using createBrowserRouter in this context? I know I need to use the RouterProvider component in some way, but I don't have enough experience to see the path forward. What am I missing here?

答案1

得分: 1

你很可能从错误的包中导入了 useFetcher。请确保你是从 @remix-run/react 导入它：

  1. import { useFetcher } from "@remix-run/react";
英文:

You are most probably importing useFetcher from an incorrect package. Make sure that you are importing it from @remix-run/react:

  1. import { useFetcher } from &quot;@remix-run/react&quot;;

huangapple
  • 本文由 发表于 2023年1月6日 13:36:21
  • 转载请务必保留本文链接：https://go.coder-hub.com/75027298.html
  • javascript
  • remix.run
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定