搜索和过滤器功能会更改状态，并且在清除项目后不会返回初始状态

问题描述

我已经实现了搜索功能，该功能可以搜索并返回来自我的redux存储的结果。 但是返回结果，当我清除文本字段时，应返回初始状态。清除或输入错误的关键字后，我最终将空出一空。

这是我的搜索和过滤功能

    filter: (state,{ payload }) => {
      const itemsToFilter = state.filter((item) => {
        let itemLowerCase = item.item_description.toLowerCase();

        let searchItemToLowerCase = payload.item_description.toLowerCase();

        return itemLowerCase.indexOf(searchItemToLowerCase) > -1;
      });

      if (itemsToFilter) {
        return itemsToFilter;
      }

      return itemInitialState; //initial state of items is not returned
    }

我使用了react-redux中的useDispatch

解决方法

我假设在“您清除文本字段”的情况下，结果是payload.item_description为''的事件。在这种情况下，Array.filter()将不匹配任何内容，但仍将返回一个空数组（不是null）。因此，您对itemsToFilter的检查将返回true，而您的新状态为空。只需检查返回数组的长度即可。

filter: (state,{ payload }) => {
  const itemsToFilter = state.filter((item) => {
    ...
  });

  if (itemsToFilter.length === 0) {
    return itemsToFilter;
  }

  return itemInitialState;
}