NextUI表格自定义数据加载无显示问题求助

使用NextUI.org的Table模板开发，官方示例代码可正常运行，但替换为自有数据库数据后，表格仅显示表头，无数据渲染。已通过useState成功存储从API获取的storedData，将示例中的load方法替换为该数据传入useAsyncList，但数据无法正常显示，请求排查原因。

官方示例代码 #

import { Table, useAsyncList, useCollator } from "@nextui-org/react";

export default function App() {
  const collator = useCollator({ numeric: true });
  async function load({ signal }) {
    const res = await fetch("https://swapi.py4e.com/api/people/?search", {
      signal,
    });
    const json = await res.json();
    return {
      items: json.results,
    };
  }
  async function sort({ items, sortDescriptor }) {
    return {
      items: items.sort((a, b) => {
        let first = a[sortDescriptor.column];
        let second = b[sortDescriptor.column];
        let cmp = collator.compare(first, second);
        if (sortDescriptor.direction === "descending") {
          cmp *= -1;
        }
        return cmp;
      }),
    };
  }
  const list = useAsyncList({ load, sort });
  return (
    <Table
      aria-label="Example static collection table"
      css={{ minWidth: "100%", height: "calc($space$14 * 10)" }}
      sortDescriptor={list.sortDescriptor}
      onSortChange={list.sort}
    >
      <Table.Header>
        <Table.Column key="name" allowsSorting>
          Name
        </Table.Column>
        <Table.Column key="height" allowsSorting>
          Height
        </Table.Column>
        <Table.Column key="mass" allowsSorting>
          Mass
        </Table.Column>
        <Table.Column key="birth_year" allowsSorting>
          Birth Year
        </Table.Column>
      </Table.Header>
      <Table.Body items={list.items} loadingState={list.loadingState}>
        {(item) => (
          <Table.Row key={item.name}>
            {(columnKey) => <Table.Cell>{item[columnKey]}</Table.Cell>}
          </Table.Row>
        )}
      </Table.Body>
    </Table>
  );
}

自定义数据获取代码 #

const [ storedData, setStoredData ] = useState([]);

fetch(`${process.env.API_GCP_URL}/samples/get-all-samples-by-month`, {
    method: 'POST',
        headers: {
        'Content-Type': 'application/json'
        },
        body: JSON.stringify({
            dateAdded: d.yyyy() + "-" + d.MM()
    })
}).then(res => res.json()).then(evaluationExtractedDatas => {
    setStoredData(evaluationExtractedDatas)
})

修改后的表格代码 #

const collator = useCollator({ numeric: true });

async function sort({ items, sortDescriptor }) {
return {
  items: items.sort((a, b) => {
    let first = a[sortDescriptor.column];
    let second = b[sortDescriptor.column];
    let cmp = collator.compare(first, second);
    if (sortDescriptor.direction === "descending") {
      cmp *= -1;
    }
    return cmp;
  }),
};
}

const list = useAsyncList({ storedData, sort });

return(
<Table id="table-to-xls" aria-label="Evaluation Table" css={{ minWidth: "100%" }} sortDescriptor={list.sortDescriptor} onSortChange={list.sort}>
      <Table.Header>
        <Table.Column key="_id" allowsSorting>
          Reference ID
        </Table.Column>
        <Table.Column key="department" allowsSorting>
          Designation
        </Table.Column>
        <Table.Column key="agentName" allowsSorting>
          Agent Name
        </Table.Column>
        <Table.Column key="orderNo" allowsSorting>
          Order No
        </Table.Column>
      </Table.Header>
      <Table.Body items={list.items} loadingState={list.loadingState}>
        {(item) => (
          <Table.Row key={item._id}>
            {(columnKey) => <Table.Cell>{item[columnKey]}</Table.Cell>}
          </Table.Row>
        )}
      </Table.Body>
    </Table>
)

1. 核心问题：useAsyncList参数使用错误 #

useAsyncList并不接受storedData作为参数，官方API只支持load方法、initialItems或items配置项。直接传storedData会被忽略，导致list.items始终为空。

修复方式二选一：

• 方式一：用initialItems传入已有数据

  const list = useAsyncList({
    initialItems: storedData,
    sort
  });
  

• 方式二：封装load方法返回storedData

  async function load() {
    return { items: storedData };
  }
  
  const list = useAsyncList({ load, sort });
  

2. 修正数据加载时机 #

直接在组件顶层写fetch会导致重复请求，且初始渲染时storedData为空。用useEffect包裹请求，确保只在需要时执行：

import { useEffect } from 'react';

const [ storedData, setStoredData ] = useState([]);
const [isLoading, setIsLoading] = useState(true);

useEffect(() => {
  fetch(`${process.env.API_GCP_URL}/samples/get-all-samples-by-month`, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ dateAdded: `${d.yyyy()}-${d.MM()}` })
  })
  .then(res => res.json())
  .then(data => {
    setStoredData(data);
    setIsLoading(false);
  })
  .catch(err => {
    console.error('数据请求失败:', err);
    setIsLoading(false);
  });
}, [d]); // 根据实际情况调整依赖项

3. 验证数据结构匹配度 #

确认storedData的每个对象都包含表格列的key字段（_id、department、agentName、orderNo），检查拼写、大小写、下划线是否完全一致。可以在组件中打印数据确认：

console.log('获取到的数据:', storedData);

4. 手动管理加载状态 #

如果使用initialItems，list.loadingState不会自动更新，需要手动传入表格：

<Table.Body 
  items={list.items} 
  loadingState={isLoading ? "loading" : "idle"}
>

内容的提问来源于stack exchange，提问作者Mark Willow Aldave