Javascript Filter函数返回未定义的

我的React应用程序从api调用中获取员工列表。对于departments组件，我有一个类似的函数，它根据名称筛选出部门。当我为员工做类似的事情时，他们有自己的名字和姓氏。我得到了错误

TypeError:无法读取未定义的属性“toLowerCase”

但是当我把响应记录到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\u name

是否不为空，然后调用

toLowerCase

函数。

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

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

---

很难确切地告诉您要用filter方法做什么，但是

Array.prototype.filter

接受一个回调，当调用该回调时，该回调被强制为布尔值。如果给定数组元素的布尔值为true，则该结果将包含在筛选列表中。如果为false，则不包括结果

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

useffect（（）=>{
如果（props.data！==未定义）{
const results=props.data.filter(
resp=>
（resp.first_name&&resp.first_name.toLowerCase（）.includes（过滤器））
&&
（resp.last_name&&resp.last_name.toLowerCase（）.includes（过滤器））
);
设置筛选结果（结果）；
}
}，[过滤器，道具数据]；

---

在尝试访问它们之前，使用简单的值/空检查确保

resp

上没有未定义

first\u name

和

resp.last\u name

的值。

那么，如果您记录

resp.first\u name

和

resp.last\u name

的值，会发生什么情况呢？它们同时返回姓氏和姓氏。这就是为什么我很困惑，为什么调用toLowerCase（）时它会给出我的未定义值你应该从过滤函数返回布尔值，而不是值你是什么意思？我的意思是，它看起来像是用一个空格连接两个布尔值；这根本无法过滤。筛选器检查数组元素是否与条件匹配（即条件为

true

），但非空字符串的计算结果始终为

true

，因此根本不进行筛选。只是执行一些操作并返回相同的列表我很确定他仍然会遇到

TypeError:cannotread属性'toLowerCase'of undefined

，使用thisTrue，向空字符串添加了一个回退来解释这个问题。与我在另一个答案中提到的问题相同，如果我在搜索诺亚霍克，搜索会过滤掉O，但不会过滤掉N。这很好，唯一奇怪的是搜索没有注册第一个字符，例如，我会输入诺亚。搜索不会在N上过滤，但会在O上过滤。不太清楚原因。@GeoffreyHutson可能会尝试| |而不是&&这将包括firstname或lastname contanis过滤的所有项目。