如何在查询参数url react中传递数组
在React中，当你需要在URL的查询参数中传递数组时，由于URL查询参数通常使用key=value的形式，直接传递数组会导致格式不正确。因此，你需要将数组转换为适合URL的格式。以下是几种常见的方法：
方法一：使用JSON字符串化
你可以将数组转换为JSON字符串，然后作为查询参数传递。在接收端，再将JSON字符串解析回数组。
发送端（React）
import { useNavigate } from 'react-router-dom';
function App() {
const navigate = useNavigate();
const handleClick = () => {
const array = [1, 2, 3];
const queryString = `array=${encodeURIComponent(JSON.stringify(array))}`;
navigate(`/target-page?${queryString}`);
};
return (
<div>
<button onClick={handleClick}>Go to Target Page</button>
</div>
);
}接收端（React）
import { useLocation } from 'react-router-dom';
function TargetPage() {
const location = useLocation();
const queryParams = new URLSearchParams(location.search);
const arrayString = queryParams.get('array');
const array = JSON.parse(decodeURIComponent(arrayString));
return (
<div>
<h1>Target Page</h1>
<p>Array: {array.join(', ')}</p>
</div>
);
}方法二：使用逗号分隔的字符串
另一种方法是使用逗号分隔的字符串来表示数组。
发送端（React）
import { useNavigate } from 'react-router-dom';
function App() {
const navigate = useNavigate();
const handleClick = () => {
const array = [1, 2, 3];
const queryString = `array=${array.join(',')}`;
navigate(`/target-page?${queryString}`);
};
return (
<div>
<button onClick={handleClick}>Go to Target Page</button>
</div>
);
}接收端（React）
import { useLocation } from 'react-router-dom';
function TargetPage() {
const location = useLocation();
const queryParams = new URLSearchParams(location.search);
const arrayString = queryParams.get('array');
const array = arrayString.split(',').map(Number);
return (
<div>
<h1>Target Page</h1>
<p>Array: {array.join(', ')}</p>
</div>
);
}方法三：使用多个查询参数
你也可以将数组的每个元素作为单独的查询参数传递。
发送端（React）
import { useNavigate } from 'react-router-dom';
function App() {
const navigate = useNavigate();
const handleClick = () => {
const array = [1, 2, 3];
const queryString = array.map((item, index) => `array[${index}]=${item}`).join('&');
navigate(`/target-page?${queryString}`);
};
return (
<div>
<button onClick={handleClick}>Go to Target Page</button>
</div>
);
}接收端（React）
import { useLocation } from 'react-router-dom';
function TargetPage() {
const location = useLocation();
const queryParams = new URLSearchParams(location.search);
const array = [];
for (let i = 0; ; i++) {
const value = queryParams.get(`array[${i}]`);
if (value === null) break;
array.push(Number(value));
}
return (
<div>
<h1>Target Page</h1>
<p>Array: {array.join(', ')}</p>
</div>
);
}总结
以上三种方法都可以在React中有效地传递数组作为URL查询参数。选择哪种方法取决于你的具体需求和应用场景。以下是一些参考链接：
希望这些信息对你有所帮助！
相关·内容
我已经创建了一个选定项的数组。Array(3) [ "contact", "fee", "inbox" ] 我希望将这个数组传递给下面的url，如下所示： http://localhost.com/api/influencers?
浏览 68提问于2021-02-11得票数 2
回答已采纳
我似乎找不到如何在不使用<Link/>的情况下使用react-router更新查询参数。hashHistory.push(url)似乎没有注册查询参数，而且似乎不能将查询对象或任何东西作为第二个参数进行传递。如何在不使用<Link>的情况下在react-router中将url从/shop/Clothes
浏览 107提问于2016-10-21得票数 185
回答已采纳
1回答
在将数据显示在React应用程序之前，我正在尝试对数据进行过滤。当我通过查询试用邮递员时，一切都是正确的。我会附上一张邮差的照片
我尝试过一些解决方案，但它们并不适用于您，如所附代码所示。GET_SERVICES_SUPPORT_LIST, error));}
浏览 11提问于2022-11-07得票数 1
回答已采纳
1回答
我试图使用use将参数传递给组件，我使用的是react组件，而不是函数组件，所以我不能使用钩子？如何在类组件中读取url参数？我试图将参数传递给一个组件，这样它就可以根据参数从数据库中获取数据并更新它，或者只创建一个新记录！谢谢
浏览 14提问于2020-02-20得票数 1
回答已采纳
1回答
如何在URL中传递参数，如.com/numune?numune_id=134&address_town=420&address_city=34，，然后相应地查询DB并将其传递给laravel中的视图？
浏览 2提问于2021-10-29得票数 0
import React, { Component } from 'react'; } )}我正在学习如何在调用API时传递查
浏览 2提问于2021-09-22得票数 1
我想问一下，如何在beta7的React-Router-Dom中通过url传递参数。通常我通过按钮/链接传递参数，然后在URL中获取它，最后在match.params对象中捕获它。如何在beta7中执行此操作，因为我的组件中仍然没有数据。路由器定义：
<Route path='/users/:_id&
浏览 11提问于2017-03-12得票数 0
我遵循了Spring Boot and React教程linked - ，并成功地集成了Spring Boot和React。然而，我现在有一个要求，我需要将参数从我的html页面传递到React组件(如userId、URL等细节)？如何将参数传递给预编译的bundle.js，进而传递给react组件？这是我在index.html中的脚本标记当前的样子。<div id=&quo
浏览 11提问于2020-02-05得票数 1
我有一个资源，我想用它构建动态url。url将包含查询字符串参数，如这是我尝试过的。我通过将字符串数组传递给这个资源来调用它，如问题是传递给addParameters方法的值不是数组，而是字符串':ids‘。
这有可能吗？顺便说一下，我
浏览 5提问于2016-05-13得票数 0
回答已采纳
假设我希望从url获取所有参数，并将其与请求结合起来。我在url中有name和age param -为了访问它，我可以使用react路由器-dom。
是否需要将所有url参数传递给react查询的第一个参数？(像这样)因为如果我们有10个参数，我们需要传递所有的searchParams.get
浏览 5提问于2022-08-31得票数 0
我想通过按下一个链接导航到一个具体的子节点，比如"/annotations/1"，"/annotations/12“，但是我不知道如何发送id来从子组件的API中获取。p> </div> }
} 你能解释一下如何在
浏览 9提问于2019-01-10得票数 0
2回答
我使用三个表备件、类别和参数和YajraDatatables。$datatables = app('datatables')->of($spareparts);
}
我的数组列表$list打印参数，如颜色、类型、轮胎等。如何在选择查询中传递$list数组？
浏览 0提问于2019-02-17得票数 0
回答已采纳
我无法在调用API管理时设置头，但将能够将URL中的参数作为查询参数传递。我将在URL中成功地将订阅键作为查询参数传递。如何在url中传递apim-跟踪，以便将跟踪url返回到响应头中。
浏览 1提问于2018-09-21得票数 0
回答已采纳
1回答
我正在尝试从分页的API中获取数据。 <div>Nothing to display</div>);}
如何在react路由器中将currentPage和Query用作查询参数，这样，如果currentPage中没有任何query或currentPage<
浏览 17提问于2021-04-01得票数 0
React路由器6.3.0复制步骤
导航({路径名："/search"，搜索：?${createSearchParams({ query: someQuery })}，状态：{ someAttributeName: someAttributeValue } )；
请注意，查询参数在URL中传递</em
浏览 15提问于2022-09-17得票数 1
我有一个React组件，需要查询数据。我想将参数/变量传递给查询。但我不知道该怎么做。import React from "react"
import {graphql, useStaticQuery} from
浏览 5提问于2020-03-08得票数 3
3回答
Javascript重定向漏洞
、、、、
假设我将url路径存储在像/?return_back_to=/foo/bar这样的查询参数中
然后将其传递给一些外部的auth服务，比如Microsoft，它执行登录操作，并使用我的查询参数返回到同一个url。此时，从查询参数中获取值并使用React navigate()重定向到这个url是否安全？或者这是否被认为是一个“开放的重定向
浏览 10提问于2022-09-28得票数 5
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
