我目前正在使用 react-router-dom v6 開發一個 React 專案，我想獲取所有查詢引數。
http://localhost:3000/users?page=5&pageSize=25
我想同時獲得 page 和 pageSize。我知道我們可以使用下面的代碼來獲取帶有鍵的引數。
import React from 'react'
import {useSearchParams} from "react-router-dom";
const Users = () => {
const [searchParams, setSearchParams] = useSearchParams();
const page = searchParams.get('page')
const pageSize = searchParams.get('pageSize')
return (<h1>page: {page}, pageSize: {pageSize}</h1>)
}
但是，然后我嘗試在不指定鍵的情況下通過 using 獲取所有引數，searchparams.getAll()但它不起作用，React 應用程式只顯示一個空白頁面。
這是我用來獲取所有引數的代碼：
import React from 'react'
import {useSearchParams} from "react-router-dom";
const Users = () => {
const [searchParams, setSearchParams] = useSearchParams();
const params = searchParams.getAll();
console.log(params)
return (<h1>params</h1>)
}
我在那里犯錯了嗎？
這是我的依賴package.json：
"dependencies": {
...,
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^6.2.2",
...,
},
uj5u.com熱心網友回復：
仍然接受一個鍵并回傳該URLSearchParams.getAll鍵的所有值的陣列。
let url = new URL('https://example.com?foo=1&bar=2'); let params = new URLSearchParams(url.search); //Add a second foo parameter. params.append('foo', 4); console.log(params.getAll('foo')) //Prints ["1","4"].
您可以使用URLSearchParams.entries回傳一個迭代器，該迭代器可用于將條目推送到鍵/值對陣列中。
例子：
const Users = () => {
const [searchParams, setSearchParams] = useSearchParams();
const params = [];
for(let entry of searchParams.entries()) {
params.push(entry);
}
console.log(params); // [["page", 5], ["pageSize", 25]]
return (
<>
<h1>Params</h1>
<ul>
{params.map(([key, value]) => (
<li key={key}>{key} - {value}</li>
))}
</ul>
</>
);
}
您還可以使用它URLSearchParams.forEach來迭代和捕獲鍵/值對。
例子：
const Users = () => {
const [searchParams, setSearchParams] = useSearchParams();
const params = [];
searchParams.forEach((key, value) => {
params.push([key, value]);
});
console.log(params); // [["page", 5], ["pageSize", 25]]
return (
<>
<h1>Params</h1>
<ul>
{params.map(([key, value]) => (
<li key={key}>{key} - {value}</li>
))}
</ul>
</>
);
}
使用.entriesfor 回圈或.forEach方法，您可以改為“減少”為物件。
const params = {};
for(let [key, value] of searchParams.entries()) {
params[key] = value;
}
-- or --
searchParams.forEach((key, value) => {
params[key] = value;
});
console.log(params); // { page: 5, pageSize: 25 }
...
params.page; // 5
params.pageSize; // 25
綜上所述，最好還是使用該.get方法并顯式獲取特定的 queryString 引數。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/461785.html
標籤：javascript 反应 反应路由器dom
上一篇：在資料處理之前回傳的函式