React-Table & React-Query getting TypeError: Cannot read property 'forEach' of undefined

Question

我正在使用 react-query 将数据提取到 react-table，但每次我都会收到“类型错误：无法读取未定义的属性 'forEach'”错误。我可以修复它的唯一方法是在 react-query 的“initialData”选项中使用“data”，还有其他方法可以修复这个错误吗？

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
      );
}

Answer 1

由于 react-query 从某处异步获取数据，数据在第一个运行上是 undefined，直到您的网络请求实际 returns 数据。显然，你不能将 undefined 传递给 react-table，所以你可以：

传递给 react-table 时回退到空数组：data: compras ?? []
销毁默认值：const { data: compras = [] } = useQuery(…)
传placeholderData使用查询
传initialData使用查询
检查从 useQuery 返回的 isLoading，将 table 移动到一个单独的组件并且只要您正在加载就不要渲染该组件（例如渲染一个加载微调器）

React-Table & React-Query getting TypeError: Cannot read property 'forEach' of undefined

React-Table & React-Query getting TypeError: Cannot read property 'forEach' of undefined

html

javascript

reactjs

react-table

react-query