过滤函数 returns 未定义

Question

我的 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]);

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

Answer 1

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

Answer 2

您的过滤器函数可能应该如下所示，否则您返回的不是布尔值而是字符串：

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

Answer 3

很难确切地说出您尝试使用过滤器方法做什么，但是 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]);

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

过滤函数 returns 未定义

Filter Function returns undefined

javascript

filter

reactjs

use-effect