React-Table 和 React-Query 获取 TypeError：无法读取未定义的属性“forEach”答案

【问题标题】：React-Table & React-Query getting TypeError: Cannot read property 'forEach' of undefinedReact-Table 和 React-Query 获取 TypeError：无法读取未定义的属性“forEach”
【发布时间】：2022-01-18 08:28:22
【问题描述】：

我正在使用 react-query 将数据提取到 react-table 中，但每次我收到“TypeError: Cannot read property 'forEach' of undefined”错误。我可以修复它的唯一方法是在 react-query 的“initialData”选项中使用“数据”，还有其他方法可以修复此错误吗？

const TableCompras = () => {
    const data = [
        {
          nf: null,
          fornecedor: null,

          pagamento: null,
          valorTotal: null
        }
      ]; 

      // Fetch Compras

      const { data: compras, error, isLoading } = useQuery(
        "compras", getAllCompras
        , {
          initialData: data
        }  
      );

      // React Table

     

      const {
        getTableProps,
        getTableBodyProps,
        headerGroups,
        page,
        nextPage,
        previousPage,
        canNextPage,
        canPreviousPage,
        pageOptions,
        prepareRow,
        state,
        setGlobalFilter
      } = useTable(
        {
          columns,
          data: compras,
          initialState: { pageSize: 5 }
        },
        useGlobalFilter,
        useSortBy,
        usePagination
      );
}

【问题讨论】：

标签： javascript html reactjs react-table react-query

【解决方案1】：

由于 react-query 从某处异步获取数据，因此数据在第一次运行时为 undefined，直到您的网络请求实际返回数据。显然，您不能将 undefined 传递给 react-table，因此您可以：

在传递到反应表时回退到一个空数组：data: compras ?? []
破坏默认值：const { data: compras = [] } = useQuery(…)
传递placeholderData 以使用查询
传递initialData 以使用查询
检查从 useQuery 返回的 isLoading，将表格移动到单独的组件，并且在加载时不要渲染该组件（例如，改为渲染加载微调器）

【讨论】：