我正在嘗試使用搜索欄組件來動態過濾由 API 請求填充的表的內容，但是當我使用此實作時，組件會無限重新渲染并重復發送相同的 API 請求。useEffect() 鉤子：
React.useEffect(() => {
const filteredRows = rows.filter((row) => {
return row.name.toLowerCase().includes(search.toLowerCase());
});
if (filteredRows !== rows){
setRows(filteredRows);
}
}, [rows, search]);
我在這個實作中是否遺漏了一些會導致它無限重新渲染的東西？
編輯 1：對于進一步的背景關系，添加來自該參考該組件的相關代碼段，這可能會導致相同的行為。
父組件內部的函式呈現表，該表通過我撰寫的 webHelpers 庫呼叫我的 API，以簡化 API 請求的使用。
function fetchUsers() {
webHelpers.get('/api/workers', environment, "api", token, (data: any) => {
if (data == undefined || data == null || data.status != undefined) {
console.log('bad fetch call');
}
else {
setLoaded(true);
setUsers(data);
console.log(users);
}
});
}
fetchUsers();
編輯 2：到目前為止嘗試解決此問題的步驟，根據評論編輯了鉤子：
React.useEffect(() => {
setRows((oldRows) => oldRows.filter((row) => {
return row.name.toLowerCase().includes(search.toLowerCase());
}));
}, [search]);
編輯 3：找到解決方案，我已通過 @Dharmik 標記了答案，指出如何管理效果呼叫，因為這導致我調查父組件并找出導致組件重復重新渲染的原因。事實證明，父元素重復運行了一個 useEffect 鉤子，它重新渲染了頁面并導致渲染和 API 呼叫回圈。我的解決方案是洗掉這個鉤子，并且子組件繼續渲染，因為它們應該沒有回圈。
uj5u.com熱心網友回復：
發生這種情況是因為您已添加rows到useEffect依賴項陣列中，并且當有人在其中輸入內容時search bar，rows會被過濾并rows不斷更新。
正因為如此，它useEffect被一次又一次地呼叫。rows從useEffect依賴陣列中洗掉，它應該可以正常作業。
uj5u.com熱心網友回復：
我想補充 Dharmik 的答案。依賴項應該保持詳盡（React 團隊推薦）。我認為一個錯誤是filteredRows !== rows使用參考相等。但rows.filter(...)回傳一個新的參考。因此，您可以使用某種深度相等檢查，或者在我看來更好的方法是：
React.useEffect(() => {
setRows((oldRows) => oldRows.filter((row) => {
return row.name.toLowerCase().includes(search.toLowerCase());
}));
}, [search]);
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/445775.html
標籤：javascript 反应 api 钩