javascript - React 数据表延迟加载或分页加载

Question

我正在使用 react-data-table-component 数据将从 API（具有 10k+ 记录）中获取。

async function getAllData() {
  let nextUrl = "/url/";
  let temp = [];
  let config = {
    headers: {
        Authorization: `token`,
    },
  };
  while (nextUrl !== null) {
    const response = await apiInstance.get(nextUrl, config);
    nextUrl = response.data.next;
    temp.push(...response.data.results);
  }
  return temp;
}

async function tempFunc() {
  let temp1 = await getAllData();
  setDataFromAPI(temp1); // useState
}

tempFunc();

// 数据表

<DataTable
    pagination
    columns={columns}
    data={dataFromAPI}
    customStyles={customStyles}
/>

现在这个函数工作正常，问题是 api 有 10k+ 条记录，页面正在加载，直到它完成 while 循环。

而不是这个，我只想加载前 30 或 50 个，然后在下一个分页上我想加载下一个响应。

如何才能做到这一点 ？