如何在 reactjs 中更新动态查询参数 api url

Question

我正在尝试使用表单输入上的 onchange 事件在我的 reactjs 应用程序中更新 api url 应用程序。 目的是执行去抖动数据搜索。 有没有办法根据输入动态更新 url？ 我正在使用 react router dom v6。我发现的所有案例都只是在浏览器 url 上更新参数。 不像字符串。 感谢所有的帮助！

底座 URL：

api/v1/notions

期待 url：

• 输入名称的值为“xxx”

api/v1/notions?name=xxx

• 输入年龄的值为“18”

api/v1/notions?name=xxx&age=18

Answer 1

这是我的解决方案。 希望它对某人有用！

const generateURLQueryParam = (url, objParams) => {
  const objFormatted = Object.fromEntries(
    Object.entries(objParams).filter(([_, v]) => v != null && v !== "")
  );
  if (Object.keys(objFormatted).length === 0) {
    return url;
  }

  const str =
    url +
    "?" +
    Object.keys(objFormatted)
      .map((key) => {
        return objFormatted[key] === "" || objFormatted[key] === null
          ? ""
          : `${key}=${encodeURIComponent(objFormatted[key])}`;
      })
      .join("&");

  return str;
};

生成uri：

useEffect(() => {
    const filter1 = {
      page: "",
      limit: "d",
    };

    const filter2 = {
      page: "",
      limit: "",
    };

    const filter3 = {
      page: "d",
      limit: "f",
    };

    console.log(generateURLQueryParam("search", filter1)); //search?limit=d
    console.log(generateURLQueryParam("search", filter2)); //search
    console.log(generateURLQueryParam("search", filter3)); //search?page=d&limit=f
  }, []);