useParams 返回未定义答案

【问题标题】：useParams returns undefineduseParams 返回未定义
【发布时间】：2021-11-26 07:33:05
【问题描述】：

查看编辑 1

我正在尝试使用 useParams() 挂钩，但它一直返回未定义的值。

这是网址

http://localhost:3000/cart/?id=61a00439d03ef6261c127997&qty=1&size=36x48

import { useParams } from "react-router-dom";

export default function CartScreen(props) {
  let { qty, id, size } = useParams();
  console.log("slug : " + qty);
  console.log("id : " + id);
  console.log("size : " + size);

  ...
}

其实我真的不知道为什么它 console.logs 这么多次，但无论如何，它是未定义的，我不知道为什么。

编辑 1：

  const router = useRouter();
  const productId = router.query.id;
  const qty = router.query.qty;
  const size = router.query.size;

  console.log("productId : " + productId);
  console.log("qty : " + qty);
  console.log("size : " + size);

【问题讨论】：

你的路线是怎么定义的？
这能回答你的问题吗？ Using the useParams hook in react

标签： javascript reactjs react-hooks

【解决方案1】：

您的 url 不是 useParams 库需要的格式。如果这对您没有帮助，请检查您是否正确定义了路线。

看看这篇文章的答案：

Using the useParams hook in react

【讨论】：

谢谢，数量和大小现在可以使用，但 id 仍未定义，请参阅编辑
@GuillaumeAyad id 的工作方式与其他参数相同。这意味着您的路线定义中很可能存在拼写错误

【解决方案2】：

使用 URLSearchParams 检查此：How to get query string using React?

export default function CartScreen(props) {
   const query = new URLSearchParams(window.location.search);
   const qty = query.get('qty');
   const id = query.get('id');
   const size = query.get('size');
   console.log("slug : " + qty);
   console.log("id : " + id);
   console.log("size : " + size);

...
}

或使用钩子 useQuery() 结帐：https://v5.reactrouter.com/web/example/query-parameters

import { useQuery } from "react-router-dom";

export default function CartScreen(props) {
   const query = useQuery();
   const qty = query.get('qty');
   const id = query.get('id');
   const size = query.get('size');
   console.log("slug : " + qty);
   console.log("id : " + id);
   console.log("size : " + size);

...
}

并尝试将 http://localhost:3000/cart/?id=xxx&qty=xxx&size=xxx 更改为 http://localhost:3000/cart?id=xxx&qty=xxx&size=xxx 是最佳做法，并且更具可读性。

【讨论】：

【解决方案3】：

如果你不想使用库，让我用一个简单的 vanilla js 方法来回答。

function urlParamsObj(source) {
    /* function returns an object with url parameters
    URL sample: www.test.com?var1=value1&var2=value2
    USE: console.log(URLparamsObj().var2)  --> output: value2
    You can use it for a url-like string also: urlParamsObj("www.ok.uk?val_a=2&b=3").val_a*/
    var urlStr = source ? source : window.location.search ? window.location.search : ""
        if (urlStr.indexOf("?") > -1) { // if there are params in URL
            var param_array = urlStr.substring(urlStr.indexOf("?") + 1).split('&'),
            theLength = param_array.length,
            params = {},
            i = 0,
            x;
            for (; i < theLength; i++) {
                x = param_array[i].toString().split('=');
                params[x[0]] = x[1];
            }
            return params;
        }
        return {};
}

用法一样：let { qty, id, size } = urlParamsObj();

【讨论】：