[英]How to pass an array in query parameter reactjs
I Am using multiselect dropdown, what i want is whatever i've selected in dropdown to send it to the server by calling an api which contains query param to accomodate these dropdown result.我正在使用多选下拉列表,我想要的是我在下拉列表中选择的任何内容,通过调用包含查询参数以容纳这些下拉结果的 api 将其发送到服务器。 I have made an array of selected items.我已经制作了一系列选定的项目。 Array(3) [ "IphoneXR", "Nokia", "Samsung" ] I want this array to get pass to below url like this: http://localhost:8080/details?dropdown=IphoneXR,Nokia,Samsung . Array(3) [ "IphoneXR", "Nokia", "Samsung" ]我希望这个数组像这样传递到 url 下面: http://localhost:8080/details?dropdown=IphoneXR,Nokia,Sam . With my approach i am ending up with this: http://localhost:8080/details?dropdown[]=IphoneXR&dropdown[]=Nokia .通过我的方法,我最终得到了这个: http://localhost:8080/details?dropdown[]=IphoneXR&dropdown[]=Nokia 。 I am not sure why dropdown[] is coming twice.我不确定为什么 dropdown[] 会出现两次。 Can anyone please help me with it谁能帮我解决这个问题
If you are passing it directly to a url via the form actions it will sent it in the url as this: index.html?如果您通过表单操作将其直接传递给 url,它将在 url 中发送,如下所示: index.html? cars =saab& cars =opel& cars =audi汽车=萨博&汽车=欧宝&汽车=奥迪
Try handling the form via js like this How handle multiple select form in ReactJS尝试像这样通过js处理表单如何处理ReactJS中的多个select表单
Convert the array into string and pass the value in query param.将数组转换为字符串并在查询参数中传递值。
multiSelectHandler = (option) => {
const details = option.selectedItems;
const stringData = details.map(({value}) => `${value}`).join(',');
console.log(stringData);
};
Array: Details: Output in console阵列:详细信息:控制台中的 Output
0: Object { value: "Iphone", label: "Iphone" }
1: Object { value: "Samsung", label: "Samsung"}
After converting into string:Output in console, Iphone,Samsung
转换成字符串后:Output 在控制台, Iphone,Samsung
Now pass this stringData in queryparam现在在 queryparam 中传递这个 stringData
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.