javascript - 数组方法错误: TypeError: Cannot read property 'filter' of undefined

Question

所以，我试图从数组中删除一些元素。我有 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 method 的评论事实上，它返回一个Array。

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

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

编辑:或者更好的是，为了简洁:

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