useMemo：我们应该如何记住未定义的 API 响应

Question

什么是正确的 1 或 2

1：

 const list =
    useMemo(
      () =>
        data?.items?.map((i) => ({
          label: i.email as string,
          value: i.id,
        })),
      [data]
    ) || [];

2：

  const list = useMemo(
    () =>
      data?.items?.map((i) => ({
        label: i.email as string,
        value: i.id,
      })) || [],
    [data]
  );

这种情况我们应该如何使用Memo？

1: 当 memo 未定义时返回 [] 2：将未定义存储为[]

Answer 1

如果您使用选项 1 并且

data

或

data.items

不存在，那么您将在每次渲染时创建一个全新的空数组。数组引用正在改变的事实可能会成为一个问题，具体取决于您对

list

所做的操作。例如，如果将

list

传递到另一个

useMemo

的依赖数组中，您将在每次渲染时破坏该记忆。

所以如果你需要一个稳定的数组引用，你应该使用#2。空数组只会创建一次，第一次

data

或

data.items

不存在，然后会重复使用（直到

data

发生变化）

如果你不需要稳定的数组引用，那么现在没有太大区别。但在将来的某个时候，您可能会添加需要稳定引用的代码，所以无论如何我都会执行#2，这样您以后就不需要更改它了。