主页 / user-16842205

Loudrous's questions

Martin Hope
Loudrous
Asked: 2024-11-17 19:01:24 +0800 CST
  • 7

我找到了一个名为 nprogress 的库，它可以自动在我的 React 应用程序中显示全局进度条。为此，我需要在导航时进行监听。我从 react-router-dom 中找到了钩子 useNavigation ，它必须在RouterProvider中使用，但 id 不支持子项。我尝试这样做：

import { useEffect } from "react";
import "./App.css";
import NProgress from "nprogress";
import "nprogress/nprogress.css";
import HomePage from './HomePage.tsx',
import AboutPage from './AboutPage.tsx'
import {
  Route,
  Link,
  useNavigation,
  createBrowserRouter,
  createRoutesFromElements,
  RouterProvider,
} from "react-router-dom";


const ProgressBarHandler = () => {
  const navigation = useNavigation();

  useEffect(() => {
    if (navigation.state === "loading") {
      NProgress.start();
    } else {
      NProgress.done();
    }
  }, [navigation.state]);

  return null;
};

const router = createBrowserRouter(
  createRoutesFromElements(
    <>
      <Route path="/" element={<HomePage />} />
      <Route path="/about" element={<AboutPage />} />
    </>
  )
);

function App() {
  return (
    <RouterProvider
      router={router}
      future={{
        v7_startTransition: true,
      }}
      fallbackElement={<ProgressBarHandler />}
    />
  );
}

我需要的是让它在导航时启动，因为有时需要几秒钟才能完成渲染一个复杂的页面，并在完成后停止。我发现这useNavigation真的很酷，因为它还可以自动管理表单操作和许多其他事情。

您对如何使用此钩子或其他钩子来监控导航有什么建议吗？

reactjs
Martin Hope
Loudrous
Asked: 2024-02-23 01:13:01 +0800 CST
  • 5

我需要将查询字符串转换为对象，但具有相应的数据类型。让我更好地解释一下：我使用外部服务中的表，该表在添加过滤器时会生成过滤器。我需要将这些过滤器放入查询字符串中，然后读回它们。当我读回它们时，我需要每种类型返回到其初始状态。例如，如果在将查询放入查询字符串之前{ foo: 10 }，我需要它在读回时具有相同的内容，而不是{ foo: "10" }。但是，我们知道查询字符串实际上是一个字符串，当我将其转换回来时，JSON 属性的值仍然是字符串。我并不是要求您为我创建一个方法来执行此操作，但我想知道您是否知道更简单的方法，例如某些实用程序。

我开始写这个方法：

const parseStringToJson = (str: string | null | undefined): object => {
  // str is skip=0&take=10
  const parsedJSON: any = QueryString.parse(str || {});
  // parsedJSON is { skip: "0", take: "10"}

  const convertDataType = (data: object | null): void => {
    Object.entries(data || {}).forEach(([key, value]) => {
      let isNumber = (typeof value === 'number' || (typeof value === 'string' && !isNaN(parseFloat(value))));
      let isBoolean = value === 'true' || value === 'false';
      //value is number
      if (isNumber) {
        return (parsedJSON[key] = Number(value));
      }
      //value is boolean
      if (isBoolean) {
        return (parsedJSON[key] = value === 'true');
      }
      //value is string
      if (typeof value === 'string' && !isNumber) {
        return (parsedJSON[key] = value);
      }
    });
  };

  convertDataType(parsedJSON);
  // parsedJSON is { skip: 0, take: 10}
  return parsedJSON;
};

其中QueryString是从qs导入的

这仅适用于一层对象，但我需要深入内部。还管理阵列。

所以在我开始这样做之前，你有更好的主意吗？

javascript