Question

我有一个要实现的搜索和过滤器功能，用户可以通过该功能搜索项目，然后将其返回到清单中；当用户清除搜索框或搜索框为空时，我希望初始状态为返回。

我已经尝试过了：该功能会通过商店进行过滤，但是当我清除它时，原始状态项不再存在。返回的是搜索值

    search: (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 (payload.item_description.length !== 0) {
        return itemsToFilter;
      } else {
        return state;
      }
    },

这是我的组件函数

import {useDispatch, useSelector} from 'react-redux';

  const [searchValue, setSearchValue] = useState("");
  
  const items = useSelector(state => state.items)
  const dispatch = useDispatch()

  const searchItems = (e) => {
    const text = e.nativeEvent.text;
    setSearchValue(text);

    dispatch(
      searchItemAction({
        item_description: searchValue,
      })
    );
  };

<TextInput value={searchValue} onChange={searchItems} />

Answer 1

首先，useState()是异步的，因此您的调度使用的是旧字符串。

  const searchItems = (e) => {
    const text = e.nativeEvent.text;
    setSearchValue(text); // Will be updated async

    dispatch(
      searchItemAction({
        item_description: searchValue, //searchValue will still be the old search value
      })
    );
  };

简单的解决方案是使用text变量：

  const searchItems = (e) => {
    const text = e.nativeEvent.text;
    setSearchValue(text);

    dispatch(
      searchItemAction({
        item_description: text,
      })
    );
  };

此外，您将原始数据存储在哪里？您应该创建一个选择器来代替。

我认为最好的解决方案是仅在此组件中使用选择器（如果您在其他任何地方都不需要它）：

const [searchValue, setSearchValue] = useState("");

const items = useSelector(state => {
  if(searchValue.length === 0) {
    return state.items;
  }
  return state.items.filter((item) => {
    let itemLowerCase = item.item_description.toLowerCase();
    let searchItemToLowerCase = searchValue.toLowerCase();
    return itemLowerCase.indexOf(searchItemToLowerCase) > -1;
  });
}

const searchItems = (e) => {
  const text = e.nativeEvent.text;
  setSearchValue(text);
};

否则，您将需要将搜索字符串存储到redux，并使用存储的字符串在选择器中进行过滤。

在Redux Store Redux中清除搜索过滤器功能后如何返回原始状态

1 个答案: