在 React 中使用过滤器可扩展地管理表的状态
在 React 中使用过滤器可扩展地管理表的状态
不久前，我正在使用一个高度复杂的仪表板，该仪表板经常有很多表（典型的分页表），并且这些表有自己的过滤器，应用后，数据将被过滤和查看。我见过开发人员面临的一个常见问题是管理过滤器的状态，从而在 API 请求中发送以检索过滤结果，有些人将其保存在全局状态/上下文或本地状态中，但我相信我们有解决此问题的更好方法。
桌子
筛选
保存在全局状态/上下文 API 中的问题
只有当您真正需要在其他任何地方访问数据时，才将数据保存在全局状态中才有意义。一个案例是人们编写 API 请求并直接在那里访问过滤器值。这不是一个充分的理由，因为这是一种反模式。我们应该始终从拥有它的地方（过滤器组件）传递 API 所需的变量数据（在这种情况下是过滤器状态），这里是设置状态的组件。所以请不要在全局状态模式中保存所有内容（我求求你：P）。
与当地国家的问题
如今，在 React 中管理本地状态中的复杂对象是一件麻烦事。因为您的过滤器状态可能如下所示。
这甚至可能很复杂，因为嵌套可以达到任何级别。
也没有在 URL 中保存数据，例如。产品人员应用了一些过滤器，添加了搜索输入，现在需要将 URL 发送给其他人，希望他在打开它时会在屏幕上看到相同的结果。不是这样。由于 URL 并不真正了解实际拍摄表快照的状态。
更好的方法
更好的方法应该是使用搜索参数 API 在 URL 中保存数据。由于这允许屏幕上使用的过滤器也反映在 URL 上，这将允许人们在具有非常幸福体验的团队之间共享它。现在，URL 中刻有过滤器的数据。
但现在出现了如何保存它的问题？我们只是使用它的 stringify 方法将对象转换为 JSON 还是采取更好的方法。我相信这是个人的选择，但直接将字符串化对象保存到 URL 中看起来有点难看 IMO，不如让我们看看几个 JSON 压缩器库。
齐普森
齐普森 是一个非常用户友好和高性能的 JSON 压缩库（在运行时性能和由此产生的压缩性能方面）。用它压缩你的搜索参数（这也需要转义/取消转义和base64编码/解码它们）。
基地 64
Base64 也可以是你的选择，因为你真的不需要为 URL 的编码和解码安装一个单独的库。
我通常更喜欢 Base64 方法。它还使 URL 更加清晰，因为只是一个额外的 base64 字符串，URL 不会提供有关其内容的太多信息。
现在让我们来看看代码
作为我经常使用的实用程序，我更喜欢为它创建一个自定义挂钩。我将使用 反应路由器 V6 和 反应 16 .
在这里，我们使用了一个由 React Router 提供的实用程序钩子，称为 useSearchParams。与使用 params 对象和 setParams 实用程序的 useState 非常相似。
在这里，我们期望过滤器的初始值。
这样，只需在设置过滤器值的组件中导入钩子就可以将数据添加到 URL 搜索参数中。
此外，如果您的过滤器数据也在其他地方使用，请使用以下方法将其转换为单例挂钩 反应单件钩子 避免多个实例，因为过滤器每次都会不断重置。
现在这就是过滤器是如何刻在 URL 中的。祝好运可扩展地管理过滤器。
最后，再见！
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
