0

这是我得到的错误：TypeError: observer.getOptimisticResult is not a function

我正在尝试使用 React-Query 和 Supbase 将数据读入 React-Table。我创建了一个useReadData.ts钩子，如下所示：

export default function useReadData(table_name, startRow, endRow) {
  return useQuery(
    ["read_data"],
    () =>
      supabase
        .from(table_name)
        .select("*")
        .range(startRow, endRow)
        .then(handleSupabaseError)
        .then(({ data }) => data)
  );
}

我在组件index.tsx内的文件中调用了这个钩子App()：

function App() {
  const [rowData, setRowData] = React.useState([]);
  const [loading, setLoading] = React.useState(false);
  const [pageCount, setPageCount] = React.useState(0);

  const fetchIdRef = React.useRef(0);

  const fetchData = React.useCallback(({ pageSize, pageIndex }) => {

    if (fetchId === fetchIdRef.current) {
      const startRow = pageSize * pageIndex;
      const endRow = startRow + pageSize;
      const table_name = "company";

      const data = () => useReadData(table_name, startRow, endRow);
      console.log(data);
      setRowData(data);
      setPageCount(10);

      setLoading(false);
    }
  }, []);

我已经花了几个星期，但我无法解决这个错误。请帮忙！

4

1 回答 1

0

你的方法有两个问题。

  1. 您在另一个钩子内有条件地调用一个钩子，这违反了钩子的规则
  2. 你试图在里面存储一个函数而不是一个数组setRowData

这是另一种方法：

index.ts

interface Range{
  startRow: number;
  endRow: number;
}

function App() {
  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])
}

useReadData.ts

export default function useReadData(table_name, startRow, endRow, fetchIdRef) {
  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([])
    }
  );
}

我不是很熟悉react-query，所以如果这有问题，请告诉我。

于 2022-01-27T15:20:54.490 回答