如何使用useEffect？所以它不会使用过滤功能复制显示的产品？ Reactjs-redux

Question

我来自商店组件的 menProducts 的数据循环太多了。这意味着它在使用我的过滤器功能时重复或渲染太多。我读过使用 useEffect 只能渲染一次但我不知道如何触发它的效果。

  const [filter, setFilter] = useState('');
  const menProducts = useSelector((state) => state.menProducts);

    const SearchText = (event) => { <--- this function is for input search bar
      setFilter(event.target.value);
    }

    useEffect(() => { <--- ??
    
    }, []);

      let dataSearch = menProducts.filter(id => { <-----Filter function
      return Object.keys(id).some(key=>
          id[key].toString().toLowerCase().includes(filter.toString().toLowerCase())
      )

  return (
    <main>

      {dataSearch.map((menproduct) => ( 
          <ProductMen key={menproduct}/> <---imported <ProductMen/> component is a component that use useDispatch for store reducer and it also displayed products.
        ))}
    </main>
  )
}

Answer 1

这样试试：

const [filter, setFilter] = useState("");
const menProducts = useSelector((state) => state.menProducts);

  const searchText = (event) => {
    setFilter(event.target.value);
  };

  useEffect(() => {
    const dataSearch = (filter) =>
      menProducts.filter((id) => {
        // function
      });

    dataSearch(filter);
  }, [filter]);

  return (
    <main>
      {dataSearch.map((menproduct) => ( 
          <ProductMen key={menproduct}/> <---imported <ProductMen/> component is a component that use useDispatch for store reducer and it also displayed products.
        ))}
    </main>
  )

要使用 useEffect 挂钩，您必须传递一个函数和一个依赖项数组。

在这种情况下，我使用了一个匿名函数，我在其中定义了函数 dataSearch 并且在依赖项数组中我刚刚包含了 filter 所以每次filter 值改变 useEffect 被执行。

Answer 2

在这种情况下您不需要 useEffect，您只需在正确的时间应用过滤器，如下所示：

const [filter, setFilter] = useState("");

const menProducts = useSelector((state) => state.menProducts);

const SearchText = (event) => {
    setFilter(event.target.value);
};

return (
    <main>
        {menProducts
            .filter((menproduct) =>
                Object.keys(menproduct).some((key) =>
                    menproduct[key]
                        .toString()
                        .toLowerCase()
                        .includes(filter.toString().toLowerCase())
                )
            )
            .map((menproduct) => (
                <ProductMen key={menproduct} />
            ))}
    </main>
);

演示：https://stackblitz.com/edit/react-6lfqps?file=src/App.js

在演示中，我还包含了一个使用 useEffect 的替代方案，如果您想看一下的话

如何使用useEffect？所以它不会使用过滤功能复制显示的产品？ Reactjs-redux

How to use useEffect? so it wont duplicates displayed products using filter function? Reactjs-redux

loops

filter

reactjs

react-hooks

use-effect