reactjs - 在 React-Query 的帮助下将数据从 Supabase 读取到 React-Table 时出错 [TypeError: Cannot read properties of undefined (reading 'forEach')]

Question

我正在尝试在 react-query 的帮助下将数据从 supbase 读取到 react-table 中。一个星期以来一直试图解决这个问题，但无法解决。

useReadData.ts钩子_

export default function useReadData(table_name, startRow, endRow, fetchIdRef) {
  const fetchId = ++fetchIdRef.current;
  return useQuery(["read_data"], () => {
    // I don't know the source of fetchId, maybe you can pass it in the hook too?
    if (startRow && endRow && fetchId === fetchIdRef.current)
      return supabase
        .from(table_name)
        .select("*")
        .range(startRow, endRow)
        .then(handleSupabaseError)
        .then(({ data }) => data);

    // To avoid returning Promise<void>. You can handle this in the useEffect as well
    return Promise.resolve([]);
  });
}

在App.tsx文件中：

  const [rowData, setRowData] = React.useState([]);
  const [loading, setLoading] = React.useState(false);
  const [pageCount, setPageCount] = React.useState(0);
  const [range, setRange] = React.useState<Range>();

  const fetchIdRef = React.useRef(0);

  const fetchData = React.useCallback(({ pageSize, pageIndex }) => {
    const startRow = pageSize * pageIndex;
    const endRow = startRow + pageSize;
    // setPageDetails({ startRow, endRow });
  }, []);

  const { data } = useReadData(
    "company",
    range?.startRow,
    range?.endRow,
    fetchIdRef
  );

  useEffect(() => {
    setRowData(data);
    setPageCount(10);
    setLoading(false);
  }, [data]);

当我尝试运行它时，我收到错误：

TypeError：无法读取未定义的属性（读取“forEach”）

  83 |   },
  84 | } = useTable(
> 85 |   {
     |  ^
  86 |     columns,
  87 |     data,
  88 |     initialState: {