时间戳

首页 > 解决方案 > 使用过滤器和挂钩的搜索功能

reactjs - 使用过滤器和挂钩的搜索功能

问题描述

我正在尝试学习有关 udemy 的反应课程，但我使用的是钩子而不是教师显示的类和状态。这是一个简单的应用程序，我下载随机用户信息和图像并使用闪存卡显示它们。

然后我需要能够搜索/过滤用户。我已经设法通过使用两种不同的 useEffects 来解决这个问题，但我想知道这是否是解决这个问题的正确方法。如果我能得到任何关于如何改进我当前代码的提示。

代码沙盒项目

标签： reactjs

解决方案

没关系。但是，您不需要使用第二个 useEffect。您可以直接在函数体中计算过滤器。如果你想缓存结果，你可以使用 useMemo 钩子，但这里没有必要。

基本上我会做的是：

const filter = users && users.length ? users.filter((person) =>
        person.name.toLowerCase().includes(searchField.toLowerCase())
      ); || []

推荐阅读