Question

数组方法错误：TypeError：无法读取未定义的属性“filter”

2019-02-27

1594

javascript ecmascript-6 lodash

因此，我试图从数组中删除一些元素。我有 2 个需要调用的过滤器。一个用于使用搜索框过滤数据，另一个取决于条件。但我收到此错误：

TypeError: TypeError: Cannot read property 'filter' of undefined

这是组件：

const PassengerCardBasedOnRoute = ({
  searchParam,
  passengerCardId,
  isAddToMyPassengersSuccess,
  unassignedDropOffPassengers,
}) => {

  // This is the filter that work based on a search parameter
  const filteredData = filterByParam =>
    filterByParam.filter(obj =>
      Object.keys(obj).some(key =>
        String(obj[key])
          .toLowerCase()
          .includes(searchParam.toLowerCase()),
      ),
    );

  // Here is where I need to remove from the array the condition met
  const filterByPassengerCardId = passengersData => {
    remove(passengersData, info => {
      return info.id === passengerCardId;
    });
  };

  const componentToRenderBasedOnParams = info => (
    <View key={info.id}>
      {isAddToMyPassengersSuccess && info.id === passengerCardId && (
        <PassengersAdded name={info.name} id={info.id} />
      )}
      <PassengersInfo
        id={info.id}
        name={info.name}
        searchParam={searchParam}
      />
    </View>
  );

  const showFeedbackIfNoLength = data => {
    if (!passengerCardId && size(filteredData(data))) {
      filteredData(data).map(info => componentToRenderBasedOnParams(info));
    } else if (passengerCardId) {

      // HERE IS WHERE THE APP THROWS THE ERROR
      filteredData(filterByPassengerCardId(data)).map(info =>
        componentToRenderBasedOnParams(info),
      );

    } else {
      return <EmptyState>No records found</EmptyState>;
    }

    return data;
  };

  return (
    <>
      <OptionsModal>{<AllPassengersOptionsModal />}</OptionsModal>
      <View>
        {!navigationStore.index && unassignedDropOffPassengers
          ? showFeedbackIfNoLength(unassignedDropOffPassengers)
          : null}
      </View>
    </>
  );
};

编辑

错误如下：

  const filteredData = filterByParam =>
    // Here comes the error
    filterByParam.filter(obj =>
      Object.keys(obj).some(key =>
        String(obj[key])
          .toLowerCase()
          .includes(searchParam.toLowerCase()),
      ),
    );

当满足此条件时：

      // HERE IS WHERE THE APP THROWS THE ERROR
      filteredData(filterByPassengerCardId(data)).map(info =>
        componentToRenderBasedOnParams(info),
      );

当满足此其他条件时，一切都正常工作：

   if (!passengerCardId && size(filteredData(data))) {
      filteredData(data).map(info => componentToRenderBasedOnParams(info));
    }

我缺少什么来实现我需要的？

Answer 1

看起来在表达式 filteredData(filterByPassengerCardId(data)) 中， filteredData 需要一个 Array ；但是， filterByPassengerCardId(data) 返回未定义。

将 filterByPassengerCardId 的返回值更改为 Array ，错误就不会再抛出。

编辑：看到您的评论说您正在使用 Lodash 的 remove 方法，它实际上返回一个 Array 。

在这种情况下，只需编辑 filterByPassengerCardId 以返回调用 remove 的结果：

const filterByPassengerCardId = passengersData => {
  return remove(passengersData, info => {
    return info.id === passengerCardId;
  });
};

编辑：或者更好的是，为了简洁起见：

const filterByPassengerCardId = passengersData => (
  remove(passengersData, ({id}) => id === passengerCardId)
);

Answer 2

问题可能出在这里：

  // Here is where I need to remove from the array the condition met
  const filterByPassengerCardId = passengersData => {
    remove(passengersData, info => {
      return info.id === passengerCardId;
    });
  };

也许它没有按照您期望的方式工作，至少它没有返回任何内容（返回未定义）。而您可能期望此函数返回一个数组。