Question

我有一个表，该表调用以下函数来获取数据。

export function fetchAddressRecords(itemsPerPage,page,sortBy,orderBy,query) {
  let p = new URLSearchParams();
  p.append("pageSize", itemsPerPage || 10);
  p.append("pageNumber", page || 1);
  p.append("keySelector", sortBy || "addressId");
  p.append("orderBy", orderBy || "asc");
  p.append("query", query || "");

  return fetch("http://localhost:6505/api/v1/address?" + p).then(
   response => response.json(),
  );
}

此刻，获取的数据的URL返回http://localhost:6505/api/v1/address?pageSize=10&pageNumber=1&keySelector=addressId&orderBy=asc&query=

我想做的是仅在'query'参数具有值时附加它。因此返回的URL为http://localhost:6505/api/v1/address?pageSize=10&pageNumber=1&keySelector=addressId&orderBy=asc，但如果有人在搜索框中键入内容，则该URL将再次包含“查询”。

这可能吗？还是我总是需要显示一个空的“查询”开始？这会影响api提取数据的方式吗？

Answer 1

您可以使用捷径条件，因此只有在存在query的情况下才附加：

export function fetchAddressRecords(itemsPerPage,page,sortBy,orderBy,query) {
  let p = new URLSearchParams();
  p.append("pageSize", itemsPerPage || 10);
  p.append("pageNumber", page || 1);
  p.append("keySelector", sortBy || "addressId");
  p.append("orderBy", orderBy || "asc");
  query && p.append("query", query);

  return fetch("http://localhost:6505/api/v1/address?" + p).then(
   response => response.json(),
  );
}

为了解释，js中的值是“真实的”，这意味着可以将它们视为布尔值将解析为true或false。在您的情况下，查询要么是一个字符串，其结果为true，要么为未定义，当它为布尔值时，其结果为false。

就是这样：

query &&  p.append("query", query);

将变为：

false && [does not get evaluated]

或

true && [does get evaluated, which means that p.append is called)

使用&&这样的快捷方式时，您必须稍微要小心，因为例如即使已被“定义”，数字0的计算结果仍为假。但是，根据您的情况，只要您有一个字符串，它将计算为true：

false && true //false
0 && true // false
"0" && true // true
"false" && true // true

在ReactJS中为URLSearchParams添加条件

1 个答案: