Clever Geek Handbook

在React中使用查询字符串

嘿。这是关于我在使用React时错过的软件包的文章。



图片



更具体地说，是关于一个用于改进和促进搜索栏查询工作的程序包。



你现在怎么办



检索值



您如何从查询字符串中获取值？我认为是这样的： 



const { item } = queryString.parse(props.location.search);


或者，如果您熟悉URLSearchParams，则可以这样做： 



const params = new URLSearchParams(props.location.search);
const item = params.get('item');


尚不完全清楚哪个更优选，因为 第一个提取了npm包，但是可以在任何地方使用，第二个内置于浏览器中，但是IE（mozilla）可能存在问题。



设定值



我们以某种方式对其进行了整理，但是仍然获得了与我们想要的结果完全相同的结果。让我们继续设置值。所有操作都使用history.push完成，该操作使用带有已添加参数的字符串。例如这样： 



history.push('/path?item=my-item-data')


对于更复杂的构造，您将需要使用查询字符串： 



const query = queryString.stringify({ item: "my-item-data" });
history.push(`/?${query}`);


或URLSearchParams： 



const query = new URLSearchParams();
query.set("item", "my-item-data");
history.push(`/?${query}`);


特效



好的。尽管我们总是接收字符串数据（并且我们需要解析它），但是如果我们期望一个数字，但是一个单词出现了（这是不禁止用户更改字符串中的查询的），那么这还是一个问题，我们将不得不围栏检查并推送值你自己



当您需要请求字段来依赖现在显示的组件时，最痛苦的事情就来了，现在每个组件都将使用一个全局状态，并根据已经存在的值自行决定更改它，您不仅需要添加自己的值来添加，以及所有其他要调整的内容，例如： 



const oldQuery = queryString.parse(location.search);
const query = queryString.stringify({ item: "my-item-data" });
history.push(`/?${{...oldQuery,  ...query}}`);


当然，最有可能将其移入一个函数中，并且使用它已经更加方便了。但是然后您将不得不使用围栏函数来读取值，检查值，以某种方式处理与传递的值相关的错误，甚至再次推送它们，否则我们将自己更改值，并将字符串保持不变。



当然，您还需要清除自己的价值，当然history.push会为您做到这一点，但是不理会它而让别人代替您去做更容易。



好的。我在暗示什么？



我想我以一种更方便的方式为您做到了。接下来，我们将讨论

react-location-query npm软件包，它可能值得您注意。



该程序包实现了钩子和HOC组件（只是对钩子的包装）来设置搜索栏中参数的规则，我们可以在其中一个组件中设置值，也可以在任何其他组件中获取值（甚至在树中更高的值，但您不应这样做） ）。



例



例如，有一个包含UsersList和Controls组件的UsersPage页面。UsersList用于加载和显示用户列表，而Controls用于设置用户过滤。一切都可以这样表示： 



const UsersPage = () => {
  const [type] = useLocationField('type', 'github');

  return ...;
}

const UsersList = () => {
  const [page, setPage] = useLocationField('page', {
    type: 'number',
    initial: 1,
    hideIfInitial: true
  });
  const [limit, setLimit] = useLocationField('limit', {
    type: 'number',
    initial: 20,
    hideIfInitial: true
  });
  const [type] = useLocationField('type');

  return ...;
}

const Controls = () => {
  const [type, setType] = useLocationField('type');
 //     type  setType
  return ...;
}


如我们所见，对于页面和限制字段，我们使用了具有以下选项的对象：



  • type — ( , )
  • initial — ,
  • hideIfInitial — : , (.. ), ,




为了自定义字段及其值，还有其他字段，例如，在无法解析该值（传递了字符串，但预期为数字/布尔值）的情况下的回调（返回新值）。所有这些字段可以看出在提供的自述NPM包页或上github.Also一个



本钩的小描述：



  • useLocationField-用于仅使用一个值的钩子
  • useLocationQuery-多值挂钩
  • useLocationQueryExtend-用于处理许多值的钩子，这些值的数据超出标准范围（例如json）
  • useLocationClear-开始使用的挂钩，您需要将其放在根组件中（没有它，则不会清除字段），或者如果已经存在上述挂钩，则无需放下它


此外，除了挂钩之外，还有HOC组件，它们是挂钩的包装。



页脚



撰写本文是为了通知其他用户此软件包的存在。在等待反馈和信息时，我想在此实现更多技巧（例如，枚举值），该包是否至少有生命权或完全不必要。


More articles:


All Articles