使用过滤器功能过滤用户 - 使用 next.js 和 typescript 进行反应答案

【问题标题】：Filtering users with filter function - React with next.js and typescript使用过滤器功能过滤用户 - 使用 next.js 和 typescript 进行反应
【发布时间】：2021-05-21 15:44:58
【问题描述】：

我正在使用 next.js 和 typescript 开发我的前端应用程序，并且我正在尝试过滤一个数组以便仅显示您正在寻找的用户，例如搜索栏，但是它总是返回我未定义。

让我给你看一点我的代码。

首先，我制作的函数filteredUsers

const [searchBar, setSearchBar] = useState<boolean>(false);

  const [results, setResults] = useState<string>("");

  // Searchbar users

  if (typeof window !== "undefined") {
    const userId: dataObject = JSON.parse(localStorage.getItem("Auth"));
    var { data }: multipleUsers = useSWR(
      "http://localhost:5000/api/user/allU/" + userId.user.id
    );
  }

  const filteredUsers = useMemo(() => {
    data !== undefined &&
      data.filter(user => {
        return user.name.toLowerCase().includes(results.toLowerCase());
      });
  }, [results]);

  console.log(filteredUsers);
  console.log(results);

现在，了解我期望的数据类型的接口

// User representation

type user = {
  id?: string;
  name?: string;
  email?: string;
  password?: string;
  friends?: [];
  banner?: string;
  perfil?: string;
};

export interface IuserData {
  data: user;
}

export type multipleUsers = { data: user[] };

现在，让我向您展示 console.log() 为我显示的内容

第一个值是我正在接收的数据。

第二个是我的函数的结果，它总是未定义

第三个是我输入的值

如何才能根据我的输入值获得我正在寻找的结果？

感谢您的宝贵时间！

【问题讨论】：

标签： reactjs typescript next.js

【解决方案1】：

将data 添加到useMemo 第二个参数，所以[results] 转向[data, results]。否则它总是使用数据作为它的初始值，并且是未定义的

【讨论】：

感谢您的回答，但它仍然未定义，我尝试分配 data.filter(user => { return user.name.toLowerCase().includes(results.toLowerCase()); }) ;到一个变量，我控制台记录它，它返回false和true，它似乎工作正常，但我必须弄清楚为什么它一直给我未定义
我删掉了 useMemo 功能，一切都很好，为什么使用 useMemo 它会给我未定义？我需要使用它
如果将使用备忘录放在if 块中会怎样？所以只有在定义了`useSwr时才会启动usememo
我认为这样就可以了，谢谢你的回答！！