第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題,去搜搜看,總會(huì)有你想問(wèn)的

當(dāng) prop 改變時(shí) React Custom Hook 運(yùn)行過(guò)程

當(dāng) prop 改變時(shí) React Custom Hook 運(yùn)行過(guò)程

胡子哥哥 2022-11-27 16:09:25
我是 React 鉤子的新手,正在嘗試制作一個(gè)自定義鉤子來(lái)連接數(shù)組并刪除重復(fù)的對(duì)象。如果道具發(fā)生變化以避免不必要的處理,我只希望掛鉤運(yùn)行該過(guò)程。我試圖緩存連接的結(jié)果并useMemo僅在更改但不起作用時(shí)才運(yùn)行。顯然,我在useMemo工作方式上遺漏了一些東西。我嘗試了各種主要圍繞細(xì)微調(diào)整的事情,例如將數(shù)組添加到useMemo依賴項(xiàng)而不是合并。任何幫助都會(huì)很棒。謝謝。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貢獻(xiàn)1796條經(jīng)驗(yàn) 獲得超10個(gè)贊

這里幾乎沒(méi)有什么事情做得不好。

對(duì)于初學(xué)者來(lái)說(shuō),當(dāng)你將數(shù)組作為第二個(gè)參數(shù)傳遞給 時(shí)useMemo,React 將比較它的值是否嚴(yán)格相等,即===. 每次比較都會(huì)失敗,因?yàn)?code>merged每次運(yùn)行掛鉤時(shí)都會(huì)重新分配變量。

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

  1. 直接merged作為第二個(gè)參數(shù)傳遞而不是將其放入數(shù)組中,這樣 React 將直接比較其中的值。我不確定這是否可行,因?yàn)橹悼赡懿粫?huì)總是以相同的順序排列。

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

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

  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

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


return result;


查看完整回答
反對(duì) 回復(fù) 2022-11-27
  • 1 回答
  • 0 關(guān)注
  • 143 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)