MERN栈教程中MongoDB数据无法展示，报错undefined

核心问题1：Fetch异步处理错误 #

你的getRecords函数里，fetch是异步操作，直接访问response.ok时，response还是未兑现的Promise，导致response.status和response.statusText均为undefined，弹出的警告框因此显示undefined。同时response.json()也是Promise，直接赋值给records并调用setRecords，实际存入状态的是Promise对象而非真实数据，表格自然无法渲染内容。

核心问题2：Delete接口路径错误 #

删除功能的接口路径写错了，应该是http://localhost:5000/record/${id}，而非http://localhost:5000/${id}，否则会请求错误路由。

修改后的代码 #

后端record.js（无需修改，确认路由正确即可）

//record.js
recordRoutes.route("/record").get(function (req, res) {
 let db_connect = dbo.getDb("todolist");
 db_connect
   .collection("records")
   .find({})
   .toArray(function (err, result) {
    if (err) throw err;
    res.json(result);
  });
});

前端recordList.js（修正异步处理和接口路径）

//recordList.js
import React, { useEffect, useState } from "react";
import { Link } from "react-router-dom";

const Record = (props) => (
  <tr>
    <td>{props.record.name}</td>
    <td>{props.record.position}</td>
    <td>{props.record.level}</td>
    <td>
      <Link className="btn btn-link" to={`/edit/${props.record._id}`}>
        Edit
      </Link>{" "}
      |
      <button
        className="btn btn-link"
        onClick={() => {
          props.deleteRecord(props.record._id);
        }}
      >
        Delete
      </button>
    </td>
  </tr>
);

export default function RecordList() {
  const [records, setRecords] = useState([]);

  // 修正异步获取数据逻辑
  useEffect(() => {
    async function getRecords() {
      try {
        const response = await fetch(`http://localhost:5000/record/`);
        if (!response.ok) {
          const message = `An error occurred: ${response.status} - ${response.statusText}`;
          window.alert(message);
          return;
        }
        const recordsData = await response.json();
        setRecords(recordsData);
      } catch (err) {
        window.alert(`请求失败: ${err.message}`);
      }
    }
    getRecords();
  }, []);

  // 修正删除接口路径
  async function deleteRecord(id) {
    try {
      await fetch(`http://localhost:5000/record/${id}`, {
        method: "DELETE",
      });
      const newRecords = records.filter((el) => el._id !== id);
      setRecords(newRecords);
    } catch (err) {
      window.alert(`删除失败: ${err.message}`);
    }
  }

  function recordList() {
    return records.map((record) => {
      return (
        <Record
          record={record}
          deleteRecord={() => deleteRecord(record._id)}
          key={record._id}
        />
      );
    });
  }

  return (
    <div>
      <h3>Record List</h3>
      <table className="table table-striped" style={{ marginTop: 20 }}>
        <thead>
          <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Level</th>
            <th>Action</th>
          </tr>
        </thead>
        <tbody>{recordList()}</tbody>
      </table>
    </div>
  );
}

关键修改点说明 #

• 给getRecords添加async关键字，用await等待fetch和response.json()完成，确保拿到真实响应和数据。
• 用try/catch包裹异步逻辑，捕获网络请求等异常，避免未处理错误。
• 修正删除功能的接口路径，匹配后端路由定义。
• 确保setRecords传入解析后的JSON数据，而非Promise对象。

内容的提问来源于stack exchange，提问作者Hoko L