如何使用下一个 js v13.4 在服务器组件中获取一个或多个参数/查询并调用 api 请求

How to get one or multiple params/query and call api request in server components using next js v13.4

提问人：Hasan 提问时间：9/21/2023 最后编辑：Hasan 更新时间：9/21/2023 访问量：39

问： 

import { getAllProductsRequest } from "../../APIRequest/products/productsApi";
import Product from "../../components/common/product/product";
import DrawerComponents from "./_components/drawer";
import Filter from "@components/common/filter/filter";

const Store = async ({ searchParams }) => {
  let searchKeyword = searchParams.search || "0";
  const min = searchParams.min;
  const max = searchParams.max;
  const brand = searchParams.brand;
  const category = searchParams.category;

  let data = await getAllProductsRequest(1, 100, `${searchKeyword}&min=${min}&max=${max}&brand=${brand}&category=${category}`);

  if (data?.total?.length < 1) {
    return (
      <div className="container">
        <h1 className="text-2xk">No products available</h1>
      </div>
    );
  }
  return (
    <div className="px-3 py-8 mx-auto ">
      
    </div>
  );
};

export default Store;

我得到了这个结果：http：//localhost：4000/list-product-global/1/100/sam&min=undefined&max=undefined&brandsymphony

我想得到当某些参数未定义时删除未定义的参数并获取如下所示的 url： http://localhost:4000/list-product-global/1/100/sam&brand=symphony

reactjs next.js 服务器端 next.js13

评论

答：

0赞 Arash jahan bakhshan 9/21/2023 #1

直截了当的解决方案

您可以简单地创建一个数据对象，过滤它们，最后使用 cunstructor 将它们字符串化。URLSearchParams

const createParams = (obj) => {
    return new URLSearchParams(Object.fromEntries(Object.entries(obj).filter(([,value]) => value !== undefined))).toString()
}

console.log(createParams({name: "John", un: undefined, another: 1}))
// name=John&another=1

更安全的解决方案

您可以使用 QS 库来安全地字符串化和解析值。

console.log(qs.stringify({name: "John", un: undefined, another: 1}));
// name=John&another=1

console.log(qs.stringify({ a: null, b: undefined }));
// a=

值得知道

用于发出请求的工具可能在内部支持 params stringify。您可能需要检查一下。

上一个：Supabase 服务器端身份验证与 Supabase

下一个：如何使用api请求在sveltekit中实现多个预输入搜索输入？