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

Question

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

我想在某些参数未定义时删除未定义的参数并获取如下网址：http://localhost:4000/list-product-global/1/100/sam&brand=symphony

Answer 1

直接的解决方案

您可以简单地创建一个数据对象，过滤它们，最后使用

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=

值得了解

您用来发出请求的工具可能支持内部参数字符串化。你可能想检查一下。