useMemo处理API返回undefined响应的正确实现方式

嘿，咱们来拆解这两种写法的区别，看看哪种更合适：

首先得明确核心差异：处理undefined的时机不同——一个在useMemo外面做修正，一个在useMemo的回调内部直接处理。

先看第一种写法：

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

这里useMemo的回调会在data或data.items不存在时返回undefined，然后靠外部的|| []把它转成空数组。但问题在于，useMemo本身缓存的是undefined这个中间值，只有当data变化时才会重新计算。虽然最终list拿到的是数组，但这种写法相当于把“结果修正”的逻辑拆分到了useMemo外面，有点违背useMemo缓存最终计算结果的设计初衷。

再看第二种写法：

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

这次我们把|| []放到了useMemo的回调里面，意味着**useMemo缓存的直接就是我们最终需要的数组**——要么是映射后的有效数组，要么是空数组。这样做的好处很明显：

1. 类型更稳定：list永远是数组类型，后续使用时不用额外判断是否为undefined，减少潜在的类型bug；
2. 逻辑更内聚：让useMemo负责缓存最终的计算结果，而不是缓存一个中间的undefined再外部修正，代码逻辑更清晰。

总结下来，第二种写法是更合理的选择。它既保证了list的类型安全，又贴合useMemo的使用逻辑，避免了不必要的外部处理步骤。

备注：内容来源于stack exchange，提问作者katrin