Question

我是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];
};

Answer 1

这里很少有事情做不正确。

对于初学者来说，当您将数组作为第二个参数传递给useMemo时，React会将其值与严格相等的值进行比较，即===。比较每次都会失败，因为您重新分配了merged变量每次钩子运行。

如果要比较数组中包含的先前值和新值，我可以想到两种方法：

直接传递merged作为第二个参数，而不是放置它在一个数组中，这样React会比较其中的值直。我不确定这是否行得通，因为也许值不一定总是相同的顺序。
您可以在每次钩子时存储数组的“旧”值运行（例如，使用useState钩子）并比较旧的自己设置新值，然后设置一个布尔值相应地。这样，此布尔值可以作为第二个您的useMemo数组中的参数。

另外，如the documentation所述，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;

道具更改时反应自定义挂钩运行过程

1 个答案: