React Loader 被调用两次

Question

在我的代码中，api 被调用了两次，我看到在控制台中加载了两次数据，

我尝试了几种方法，例如使用变量来检查加载程序是否已加载等，但它们都不起作用，我是反应初学者，所以不太确定汤姆如何解决这个问题，我也尝试过人工智能平台，但它们也失败或给出了响应这使得代码变得更糟。所以我希望我能在这里得到帮助

import React from 'react';
import { useNavigate, useLoaderData, defer, Await } from 'react-router-dom';

//other imports

export const Loader = () => {
    let fetch_data = fetchRequest('', 'GET');
    console.log("loading data");
    return defer({ loaderPromise: fetch_data });
};

export default function Home() {

    const loaderData = useLoaderData();

    const navigate = useNavigate();

    return (
        <div>
            <Navbar />
            <React.Suspense fallback={<PreLoader />}>

                <Await resolve={loaderData.loaderPromise}>
                    {(resolvedData) => {

                        if (resolvedData.type === "warning") {
                            throw new Error(resolvedData.msg);
                        }

                        let { coins_list, wallets_list } = resolvedData;

                        return (
                            <>
                               "JSX"
                               </>
                </Await>
            </React.Suspense>


            <Footer />
        </div>
    )
}

这是我定义路由的 App.js

import React from "react";
import { createBrowserRouter, createRoutesFromElements, RouterProvider, Route } from "react-router-dom";
import Home, { Loader as HomeLoader } from "./Pages/Home";

//Components
import Error from './Components/Error';

const App = () => {
  const router = createBrowserRouter(
    createRoutesFromElements(
      <Route path="/" errorElement={<Error />}>
        <Route index element={<Home />} loader={HomeLoader} />
      </Route>
    )
  );
  return (
    <RouterProvider router={router}>

    </RouterProvider>
  );
}

export default App;

Answer 1

您面临的问题似乎是由于加载程序被调用两次所致。这可能是因为加载程序既作为组件 (Loader) 又作为路由定义 (loader={HomeLoader}) 被调用。要解决此问题，您应该只使用一种方法来加载数据。

由于您使用的是react-router-dom，因此您可以删除Loader组件并使用loader属性直接在路由定义中处理数据加载。

在 app.js 中尝试一下

const App = () => {
  const router = createBrowserRouter(
    createRoutesFromElements(
      <Route path="/" errorElement={<Error />}>
        {/* Remove loader property */}
        <Route index element={<Home />} />
      </Route>
    )
  );
  return (
    <RouterProvider router={router} />
  );
}

然后，在 Home 组件中，您可以使用

useLoaderData

钩子直接获取数据：