React中useQuery获取数据无法在Kbar UI展示，控制台可打印

我在React组件中使用useQuery获取数据时遇到问题：数据能通过console.log正常打印，但无法在Kbar搜索组件的UI上展示；当创建模拟数组并映射时，数据却能正常显示。

以下代码无法在UI展示数据：

const gparam = {
  search: {
    type: [{ operator: 'eq', value: 'digital_product' }]
  }
};
export function useSearchActions() {
  const { data: dataKbar } = useQuery(GQL_PAYMENTLINK_KBAR, { variables: gparam });

  const coba = useMemo(() => {
    // const actions = [];
    const actions =
      dataKbar?.getPaymentLinkPage?.items?.map(aya => {
        return {
          id: 'aya.id',
          // parent: parentId.cobaRoot,
          // subtitle:"ah",
          name: aya.name,
          keywords: 'coba',
          section: 'digital produk',
          perform: () => (window.location.pathname = `/digital-product-detail/${aya.id}`)
        };
      }) || [];

    return actions;
  }, []);

}

原因分析 #

核心问题出在useMemo的依赖数组上：

• 你给useMemo传了空的依赖数组[]，这意味着useMemo只会在组件首次渲染时执行一次，后续即使dataKbar因为useQuery请求完成而更新，useMemo也不会重新计算coba的值。
• 初始渲染时dataKbar是undefined，所以actions会被赋值为空数组[]，后续数据加载完成后，useMemo不重新执行，coba始终是空数组，自然无法在UI上展示。
• 而模拟数组是静态的，组件渲染时就有值，所以能正常展示。

另外还有一个小问题：你的id字段写的是'aya.id'，这是一个固定字符串，不是读取aya.id的实际值，所有生成的action的id都会重复，可能导致Kbar识别异常。

解决方案 #

修改useMemo的依赖数组，把dataKbar加入进去，同时修正id的赋值：

const gparam = {
  search: {
    type: [{ operator: 'eq', value: 'digital_product' }]
  }
};
export function useSearchActions() {
  const { data: dataKbar } = useQuery(GQL_PAYMENTLINK_KBAR, { variables: gparam });

  const coba = useMemo(() => {
    const actions =
      dataKbar?.getPaymentLinkPage?.items?.map(aya => {
        return {
          id: aya.id, // 修正：去掉引号，读取实际id值
          name: aya.name,
          keywords: 'coba',
          section: 'digital produk',
          perform: () => (window.location.pathname = `/digital-product-detail/${aya.id}`)
        };
      }) || [];

    return actions;
  }, [dataKbar]); // 新增：将dataKbar加入依赖数组
}

这样当dataKbar加载完成更新时，useMemo会重新执行映射逻辑，生成包含真实数据的actions数组，Kbar组件就能拿到最新数据并展示了。

内容的提问来源于stack exchange，提问作者irahama