我來自商店組件的 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>
)
}
uj5u.com熱心網友回復：
在這種情況下，您不需要這樣做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如果你想看看它可以使用
uj5u.com熱心網友回復：
試試這樣：
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都會執行。
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/442920.html