反应本机中的过滤和取消过滤按钮答案

【问题标题】：FIlter and unfilter button in react native反应本机中的过滤和取消过滤按钮
【发布时间】：2021-12-03 09:43:46
【问题描述】：

我正在尝试按类别 ID 过滤一些数据。现在我可以按类别过滤值： 1. 我想要实现的是当再次单击按钮时，它应该清除过滤器。下面是代码：

const onPress = () => {
    const filteredResults = results.filter((result) =>{
        return result.category === 1;
    });
    setResults(filteredResults);
};

按钮：

<Button onPress={() =>{onPress()}}>Lajme</Button>

如何在同一个按钮中实现这个功能：

const clearFilter = () => {
    const filteredResults = results
    setResults(filteredResults);
};

【问题讨论】：

标签： reactjs react-native react-hooks

【解决方案1】：

将当前过滤器 (category) 存储为 useState()，并在您更新它时（参见 toggleFilter）检查当前过滤器是否已设置。如果是，请重置（例如更改为null）。

const { useState, useMemo } = React;

const Demo = ({ results }) => {
  const [category, setCategory] = useState(null);
  
  const filteredResults = useMemo(() => results.filter(result => category === null || result.category === category), [results, category]);
  
  const toggleFilter = cat => setCategory(c => cat === c ? null : cat);

  return (
    <div>
      <button onClick={() => toggleFilter(1)}>Cat 1</button>
      <button onClick={() => toggleFilter(2)}>Cat 2</button>
      
      <div>
        {JSON.stringify(filteredResults)}
      </div>
    </div>
  );
};

const results = [{ category: 1 }, { category: 2 }, { category: 2 }, { category: 1 }]

ReactDOM.render(
  <Demo results={results} />,
  root
)

<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>

<div id="root"></div>

【讨论】：

谢谢你的回答，但我需要它来反应原生。抱歉，我会更新标签。
React Native 也有 useState 和 useMemo。只需将 JSX 替换为您用于视图的任何内容。
我试过了，但无法成功实现。我的结果数据来自一个 api，我将它放在一个平面列表组件中，我在主屏幕中声明，就像 <ResultList results={results} navigation={navigation} />。现在我应该在那里用filteredResults const替换结果吗？
做到了，现在它可以工作了。谢谢
不客气 :)

【解决方案2】：

基本上，您可以使用状态变量来了解当前是否应用了过滤器。

const [isFiltered, setFiltered] = useState(false);

const onPress = () => {
    if (isFiltered) {
        setResults(results); // Update results without filter
        setFiltered(false); // Update the state
    } else {
        const filteredResults = results.filter(({ category }) => category === 1); // Filter the results
        setResults(filteredResults); // Update results
        setFiltered(true); // Update the state
    }
};

// ...

<Button onPress={onPress}>Lajme</Button>

【讨论】：

感谢您的回答。我试过了，但不幸的是没有用。我过滤了一些 api 结果并将它们呈现在一个平面列表中 <ResultList results={results} navigation={navigation} /> 这是主页中的列表