reactjs 未捕获的引用错误:queryString未定义React js

6qftjkof  于 12个月前  发布在  React
关注(0)|答案(1)|浏览(118)

我有这个错误在控制台日志和我的应用程序的空白。当我运行npm build时,构建成功了,我不知道发生了什么。我希望有人能帮帮我,因为我被卡住了。

我猜这是库的错误,它引用了太多的查询字符串下面的代码,我使用这个库:

import { useState, useLayoutEffect } from 'react';
import queryString from 'query-string';

// location
import { useLocation } from 'react-router-dom';

export const useSearchParams = () => {
  // search params
  const { search } = useLocation();

  // local state
  const [params, setParams] = useState<Record<string, any>>({});

  // get parsed query
  useLayoutEffect(() => {
    const parsedQuery = queryString?.parse(search);
    setParams(parsedQuery);
  }, [search]);

  return params;
};
const handleLoadMoreFlowers = () => {
    const nextPage = currentPage + 1;
    navigate(
      `${location?.pathname}?${queryString?.stringify({
        page: nextPage,
        query,
        ...rest,
      })}`,
    );
  };

这是json和tsconfig.sjon包

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@emotion/react": "^11.11.1",
    "@emotion/styled": "^11.11.0",
    "@mui/material": "^5.14.13",
    "@reduxjs/toolkit": "^1.9.7",
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.5.2",
    "@types/node": "^16.18.54",
    "@types/react": "^18.2.23",
    "@types/react-dom": "^18.2.8",
    "axios": "^1.5.1",
    "classnames": "^2.3.2",
    "jwt-decode": "^3.1.2",
    "prettier": "^3.0.3",
    "query-string": "^8.1.0",
    "react": "^18.2.0",
    "react-hook-form": "^7.46.2",
    "react-hot-toast": "^2.4.1",
    "react-redux": "^8.1.3",
    "react-router-dom": "^6.16.0",
    "react-scripts": "5.0.1",
    "react-test-renderer": "^18.2.0",
    "redux-persist": "^6.0.0",
    "redux-saga": "^1.2.3",
    "typescript": "^4.3.5",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
    "@types/react-test-renderer": "^18.0.3",
    "tailwindcss": "^3.3.3"
  }
}
{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "react-jsx",
    "noEmit": true,
    "baseUrl": "src"
  },
  "include": [
    "src"
  ],
  "exclude": [
    "node_modules",
    "build",
  ]
}
nzrxty8p

nzrxty8p1#

我看不出在软件包上使用"Optional Chaining"的理由。尝试在你的代码中删除queryString后面的问号,它可能会起作用,也就是将queryString?更改为queryString,以下是它如何应用于你共享的代码:

import { useState, useLayoutEffect } from 'react';
import queryString from 'query-string';

// location
import { useLocation } from 'react-router-dom';

export const useSearchParams = () => {
  // search params
  const { search } = useLocation();

  // local state
  const [params, setParams] = useState<Record<string, any>>({});

  // get parsed query
  useLayoutEffect(() => {
    const parsedQuery = queryString.parse(search); // change queryString? to queryString
    setParams(parsedQuery);
  }, [search]);

  return params;
};

--

const handleLoadMoreFlowers = () => {
  const nextPage = currentPage + 1;
  navigate(
    `${location?.pathname}?${queryString?.stringify({
      page: nextPage,
      query,
      ...rest,
    })}`,
  );
};

相关问题