根据 2 个值过滤数据答案

【问题标题】：Filter data based on 2 values根据 2 个值过滤数据
【发布时间】：2021-10-12 14:28:27
【问题描述】：

我正在创建一个需要 2 个搜索栏的应用程序。一个按名称搜索，另一个按标签搜索。当用户将名称和标签都放在搜索栏中时，搜索也应该起作用。

来自api的数据格式

{
 "students" : [
   {
    "city": "city",
    "company" : "company",
    "email" : "email",
    "firstName" : "firstName",
    "grades" : ["12", "54"],
    "id" : "1",
    "lastName" : "lastName",
    "pic" : "url",
    "skill" : "skill"
   },
 ],
}

我的应用程序正在https://temp-application.netlify.app/ 上运行

目前，该应用程序确实使用名称进行搜索，因为它应该是。但是，只要我附上按标签搜索的功能。一切都崩溃了。

这就是我实现名称和标签搜索的方式。

useEffect(() => {
        let filteredResults = results.filter((result) => {
            const name = result.firstName + " " + result.lastName;
            const isName = name
                .toLowerCase()
                .includes(searchName.toLowerCase());

            const tags =
                result.tag !== undefined ? result.tag.toString() : false;
            const isTag =
                typeof tags === "string"
                    ? tags.toLowerCase().includes(searchTag.toLowerCase())
                    : false;

            return isName && isTag;
        });

        setStudents(filteredResults);
    }, [searchName, searchTag]);

请注意，API 返回的对象中不存在 'tag' 数组

【问题讨论】：

标签： reactjs api filter

【解决方案1】：

您提供的链接无效。
对于标签，您在 Student(result) 对象中的“标签”字符串中搜索，但给定数据中没有名为标签的键。
即使您有标签键，您也可能不会得到结果，因为您正在执行“&&”而不是“||”

【讨论】：

【解决方案2】：

我解决了。问题是我试图一次性进行搜索。但是我需要创建一个 if-else 链来实现结果。

这是最终的功能

        let filteredResults = results.filter((result) => {
            const name = result.firstName + " " + result.lastName;
            const tags =
                result.tag !== undefined ? result.tag.toString() : false;

            if (searchName !== "" && searchTag === "") {
                return name.toLowerCase().includes(searchName.toLowerCase());
            } else if (searchName === "" && searchTag !== "") {
                return typeof tags === "string"
                    ? tags.toLowerCase().includes(searchTag.toLowerCase())
                    : false;
            } else if (searchName !== "" && searchTag !== "") {
                const isName = name
                    .toLowerCase()
                    .includes(searchName.toLowerCase());
                const isTag =
                    typeof tags === "string"
                        ? tags.toLowerCase().includes(searchTag.toLowerCase())
                        : false;

                return isName && isTag;
            } else if (searchName === "" && searchTag === "") {
                return true;
            }
            return false;
        });

        setStudents(filteredResults);
    }, [searchName, searchTag]);

【讨论】：