亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

當 prop 改變時 React Custom Hook 運行過程

當 prop 改變時 React Custom Hook 運行過程

胡子哥哥 2022-11-27 16:09:25
我是 React 鉤子的新手,正在嘗試制作一個自定義鉤子來連接數組并刪除重復的對象。如果道具發生變化以避免不必要的處理,我只希望掛鉤運行該過程。我試圖緩存連接的結果并useMemo僅在更改但不起作用時才運行。顯然,我在useMemo工作方式上遺漏了一些東西。我嘗試了各種主要圍繞細微調整的事情,例如將數組添加到useMemo依賴項而不是合并。任何幫助都會很棒。謝謝。import * as React from "react";let merged: any = [];let result: any = [];export const useRemoveDuplicateObjects = (arrays: any, value: string) => {  merged = arrays.flat();  const key = (item: any) => {    return item[value];  };  const process = () => {    result = [...new Map(merged.map((item: any) => [key(item), item])).values()];  };  React.useMemo(() => {    if (merged.length) {      process();    }  }, [merged]);  return [result];};
查看完整描述

1 回答

?
白衣染霜花

TA貢獻1796條經驗 獲得超10個贊

這里幾乎沒有什么事情做得不好。

對于初學者來說,當你將數組作為第二個參數傳遞給 時useMemo,React 將比較它的值是否嚴格相等,即===. 每次比較都會失敗,因為merged每次運行掛鉤時都會重新分配變量。

如果您想比較數組包含的先前值和新值,我可以想到兩種方法:

  1. 直接merged作為第二個參數傳遞而不是將其放入數組中,這樣 React 將直接比較其中的值。我不確定這是否可行,因為值可能不會總是以相同的順序排列。

  2. 您可以在每次掛鉤運行時存儲數組的“舊”值(useState例如使用掛鉤)并自己將這個舊值與新值進行比較,然后相應地設置一個布爾值。這樣,這個布爾值可以作為數組中的第二個參數傳遞給您的useMemo.

此外,正如文檔所述,useMemo“返回一個昂貴的計算值”。因此,為了了解它的工作原理,您應該以這種方式獲得“結果”值:

  const result = React.useMemo(() => {

     if (merged.length) {

       return [...new Map(merged.map((item: any) => [key(item), item])).values()]

     }

     return []

   }, merged); // will or won't work, I'd say go with the comparison yourself as stated before

最后,如果您只想從鉤子中返回一個值,則無需將其包裝在數組中,您可以這樣做:


return result;


查看完整回答
反對 回復 2022-11-27
  • 1 回答
  • 0 關注
  • 137 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號