React组件无法渲染从MongoDB获取的95条数据到表格的问题求助

我仔细看了你的代码和问题描述，控制台能正常打印数据但表格就是不渲染，大概率是数据结构不匹配导致的，我帮你梳理下问题和对应的解决方案：

核心问题：API返回的是数组而非单个对象 #

你的后端API用了database.find({ SR_NO: key })，这个方法返回的是匹配条件的文档数组——哪怕只有一条匹配数据，返回的也是[{...}]的数组形式。而你在React里直接把这个数组push到FetchData中，之后state.map遍历的时候，每个item其实是一个数组，而非单个文档对象，所以item.PARTNER这类属性自然取不到，表格就显示为空。

解决方案1：修改后端API返回单个对象（推荐） #

既然你是按SR_NO查询，这个字段应该是唯一标识，直接用findOne替代find，返回单个文档对象就好：

app.get("/search/:key", async (req, resp) => {
  const key = req.params.key;
  let result = await database.findOne({ SR_NO: key }) // 改用findOne返回单个对象
  resp.send(result);
});

解决方案2：前端处理数组格式（如果不能改后端） #

如果后端没法调整，就在前端拿到数据后，手动取数组的第一个元素：

async function GET() {
  const FetchData = []; // 建议把变量声明放在函数内部，避免外部变量污染
  for(let i=0;i<95;i++){
    let SR_NO = data();
    let result = await fetch(`http://localhost:5000/search/${SR_NO}`);
    result = await result.json();
    console.log(result);
    FetchData.push(result[0]); // 取数组中的第一个文档对象
  }
  setstate(FetchData);
}

额外优化建议 #

1. 表格语义修正：把表头放在<thead>标签里，而非<tbody>，这是更规范的HTML写法：

<Table striped bordered hover >
  <thead>
    <tr>
      <th>PARTNER</th>
      <th>PROPERTY_OWNER_NAME</th>
      <th>WARD</th>
      <th>ZONE_PT</th>
      <th>ASSMENTYEAR</th>
      <th>TAX_AMT</th>
      <th>SR_NO</th>
    </tr>
  </thead>
  <tbody>
    {/* 映射数据的代码 */}
  </tbody>
</Table>

2. 并行请求优化：你现在用for循环+await是串行发起95次请求，速度会很慢，改用Promise.all并行发起请求，能大幅提升数据获取效率：

async function GET() {
  // 先创建所有请求的Promise数组
  const requestPromises = Array.from({length:95}, async () => {
    const SR_NO = data();
    const res = await fetch(`http://localhost:5000/search/${SR_NO}`);
    const result = await res.json();
    return result[0]; // 同样处理数组（如果后端没改的话）
  });
  // 等待所有请求完成后更新状态
  const fetchedData = await Promise.all(requestPromises);
  setstate(fetchedData);
}

3. 检查data()函数：确保每次循环调用data()返回的是不同的SR_NO，不然会重复获取同一数据，影响最终表格展示的内容。

备注：内容来源于stack exchange，提问作者Ayush Sharma