Question

过滤函数返回未定义

2019-11-13

1722

javascript reactjs filter use-effect

我的 React 应用通过 api 调用获取员工列表。我有一个类似的部门组件函数，可以根据名称筛选出部门。当我对具有 first_name 和 last_name 属性的员工执行类似操作时，我收到错误

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

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

Answer 1

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

假设您返回一个非空字符串，则所有结果都会显示出来；我认为这会让您更接近您想要做的事情：

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 上没有未定义。

Answer 2

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

Answer 3

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

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