如何在react js中设置和获取对象的多个查询参数(动态)

Question

我的数据对象:

const data = {
langauge_in: ["EN"],
resource_type_in: ["VIDEOS"]
};

如何设置url的查询参数:

localhost: 3000/资源/? language_in [] = EN& resource_type_in[] =视频

注意:filter的值可以是多个，当我更新过滤器时需要改变。

这是我已经尝试过的代码:

useEffect(() => {
let params = {};
new URLSearchParams(data)
.forEach((value, key) => { params = { ...params, [key]: value }; });
console.log('>>> params', params);
history.push({ search: params.toString() });
}, [history, data]);

谢谢你:)

Answer 1

您必须访问url参数并将其作为useeffect依赖项传递。因此，每当参数改变时，都会运行useeffect以获取新值。试试这样做:

const urlParams = new URLSearchParams(window.location.search);
const langauge = urlParams.get("langauge_in");
const resource = urlParams.get("resource_type_in");
useEffect(()=>{
console.log(language)
console.log(resource)
}, [language, resource])