过滤函数返回未定义答案

【问题标题】：Filter Function returns undefined过滤函数返回未定义
【发布时间】：2022-04-11 03:53:18
【问题描述】：

我的 React 应用从 api 调用中获取员工列表。对于根据名称过滤掉部门的部门组件，我有类似的功能。当我为具有 first_name 和 last_name 属性的员工做类似的事情时。我得到了错误

TypeError: Cannot read property 'toLowerCase' of undefined

但是当我 console.log 响应时，名字就没有问题了。

下面是我使用的 useEffect 钩子

 useEffect(() => {
    if (props.data !== undefined) {
      const results = props.data.filter(
        resp =>
          resp.first_name.toLowerCase().includes(filter) +
          " " +
          resp.last_name.toLowerCase().includes(filter)
      );
      setFilteredResults(results);
    }
  }, [filter, props.data]);

我将过滤后的结果放入数组中的状态，然后映射到它们上显示

【问题讨论】：

那么如果您记录resp.first_name 和resp.last_name 的值会发生什么？
它们返回姓氏和名字。所以这就是为什么我对为什么当我调用 toLowerCase() 时它给出了我的 undefined 感到困惑
你应该从过滤函数返回布尔值而不是值
你是什么意思？
我的意思是看起来你正在用空格连接两个布尔值；这根本不会过滤。过滤器检查数组元素是否匹配条件（即条件为true），但非空字符串的计算结果始终为true，因此您根本没有过滤。只是执行一些操作并返回相同的列表

标签： javascript reactjs filter use-effect

【解决方案1】：

很难准确地说出你想用你的过滤器方法做什么，但Array.prototype.filter 接受一个回调，当被调用时，它被强制为一个布尔值。如果该布尔值对于给定的数组元素为真，则该结果将包含在过滤列表中。如果为 false，则不包含结果。

鉴于您返回的是非空字符串，所有结果都会显示出来；我认为这会让你更接近你想要做的事情：

useEffect(() => {
    if (props.data !== undefined) {
      const results = props.data.filter(
        resp =>
          (resp.first_name && resp.first_name.toLowerCase().includes(filter))
          &&
          (resp.last_name && resp.last_name.toLowerCase().includes(filter))
      );
      setFilteredResults(results);
    }
  }, [filter, props.data]);

在尝试访问它们之前，使用简单的值/空检查来确保 first_name 和 last_name 没有在 resp 上未定义。

【讨论】：

好吧，这很好，唯一奇怪的部分是搜索没有注册第一个字符，例如我将输入 Noah。搜索不会过滤 N，但会过滤 O。不太清楚为什么会这样。
@GeoffreyHutson 也许试试 ||而不是 && 将包括 firstname 或 lastname contanis 过滤的所有项目。

【解决方案2】：

我想说避免这种情况的最简单方法是首先检查resp.first_name 是否不为空，然后调用toLowerCase 函数。

【讨论】：

【解决方案3】：

您的过滤器函数应该看起来像这样，否则您返回的不是布尔值而是字符串：

const results = props.data.filter(
  resp => (resp.first_name || '').toLowerCase().includes(filter) &&
  (resp.last_name || '').toLowerCase().includes(filter)
);

【讨论】：

我很确定他还是会遇到TypeError: Cannot read property 'toLowerCase' of undefined这个
是的，添加了一个空字符串的后备来解决这个问题。
与我在另一个答案中提到的问题相同，如果我正在搜索 Noah，搜索将过滤掉 O 而不是 N