Почему useAsyncList() возвращает всегда пустой list.items массив?

Question

toster1500 @toster1500

Почему useAsyncList() возвращает всегда пустой list.items массив?

Подскажите пожалуйста почему list.items всегда пустой массив?

Code

import axios from "axios";
import {
  Cell,
  Column,
  Row,
  TableView,
  TableBody,
  TableHeader,
} from "@react-spectrum/table";
import { GetServerSideProps, InferGetServerSidePropsType } from "next";
import { useAsyncList } from "@adobe/react-spectrum";
import { useEffect } from "react";

interface Student {
  studentName: string;
  courseName: string;
  moduleName: string;
  lessonName: string;
  progress: number;
}

interface StudentsPageProps {
  students: Student[];
}

export const getServerSideProps: GetServerSideProps<
  StudentsPageProps
> = async () => {
  try {
    const studentsResponse = await axios.get<Student[]>(
      "https://mocki.io/v1/e8e35534-5141-428e-9a9b-2b254862635f"
    );

    return {
      props: {
        students: studentsResponse.data,
      },
    };
  } catch (err) {
    return {
      notFound: true,
    };
  }
};

const StudentsPage = ({
  students,
}: InferGetServerSidePropsType<typeof getServerSideProps>) => {
  const columns = [
    { name: "Student Name", key: "studentName" },
    { name: "Course Name", key: "courseName" },
    { name: "Module Name", key: "moduleName" },
    { name: "Lesson Name", key: "lessonName" },
    { name: "Progress", key: "progress" },
  ];

  const list = useAsyncList<Student>({
    items: students,
    async sort({ items, sortDescriptor }: any) {
      console.log(items);

      return {
        items: items.sort((a: any, b: any) => {
          const first = a[sortDescriptor.column];
          const second = b[sortDescriptor.column];
          let cmp;
          if (typeof first === "string" && typeof second === "string") {
            cmp = first.localeCompare(second, undefined, { numeric: true });
          } else {
            cmp = first < second ? -1 : 1;
          }
          if (sortDescriptor.direction === "descending") {
            cmp *= -1;
          }
          return cmp;
        }),
      };
    },
  } as any);

  useEffect(() => {
    console.log(list);
  }, [list]);

  if (list.isLoading) {
    return <div>Loading...</div>;
  }

  return (
    <TableView
      aria-label="Students"
      sortDescriptor={list.sortDescriptor}
      onSortChange={list.sort}
    >
      <TableHeader>
        {columns.map((column) => (
          <Column key={column.key} allowsSorting>
            {column.name}
          </Column>
        ))}
      </TableHeader>
      <TableBody items={list.items}>
        {(student: any) => (
          <Row key={student.studentName}>
            {columns.map((column: any) => (
              <Cell key={`${student.studentName}-${column.key}`}>
                {student[column.key]}
              </Cell>
            ))}
          </Row>
        )}
      </TableBody>
    </TableView>
  );
};

export default StudentsPage;

import { Html, Head, Main, NextScript } from 'next/document'

export default function Document() {
  return (
    <Html lang="en">
      <Head />
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}

import "@/styles/globals.css";
import type { AppProps } from "next/app";
import { SSRProvider } from "react-aria";
import { defaultTheme, Provider } from "@adobe/react-spectrum";

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <SSRProvider>
      <Provider theme={defaultTheme}>
        <Component {...pageProps} />
      </Provider>
    </SSRProvider>
  );
}

export default MyApp;