MERN栈Todo应用：Mongoose+Express连接React前端数据同步问题

问题概述 #

基于MERN栈开发的待办清单应用，后端MongoDB已有存储数据，但前端useState始终为空，无法渲染后端返回的任务数据。

核心错误点排查 #

• 重复解析JSON响应：getData函数中已完成response.json()解析并返回数据，但fetchData中再次调用response.json()，导致响应流被重复读取，最终获取的数据为undefined，无法更新状态。
• 请求地址不完整：前端fetch('/get')默认使用前端项目端口（通常是3000），而后端运行在3001端口，导致请求无法命中后端接口。
• 状态赋值逻辑错误：后端返回的是包含多条任务的数组，当前代码仅取数组第一个元素的user_comment（字符串类型）赋值给初始为数组的textInfo，后续map遍历会直接报错。
• 缺失异常与加载处理：未设置加载状态，请求未完成时直接遍历空数组或undefined会触发报错；同时未处理后端返回空数组的场景。

修复后的代码 #

前端App.js修复版本

import { useState, useEffect } from "react";
import "./App.css";

import Task from "./components/Task";
import { CircularProgress } from "@mui/material";
import Registration from "./components/Registration";

function App() {
  const [tasks, setTasks] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  const getData = async () => {
    try {
      // 指定完整后端接口地址
      const response = await fetch('http://localhost:3001/get');
      if (!response.ok) {
        throw new Error(`请求失败: ${response.status}`);
      }
      const data = await response.json();
      return data;
    } catch (error) {
      console.error('获取数据失败:', error);
      throw error;
    }
  };

  useEffect(() => {
    const fetchData = async () => {
      try {
        // 直接使用getData返回的已解析数据
        const data = await getData();
        // 存入完整任务数组
        setTasks(data);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    };
    
    fetchData();
  }, []);

  if (loading) return <CircularProgress />;
  if (error) return <div>加载失败: {error}</div>;

  return (
    <div className="App">
      <Registration />
      {tasks.length === 0 ? (
        <div>暂无任务</div>
      ) : (
        tasks.map((task, index) => (
          <Task 
            key={index}
            username={task.username} 
            email={task.email} 
            text={task.user_comment} 
          />
        ))
      )}
    </div>
  );
}

export default App;

后端server.js优化版本

const express = require('express')
const mongoose = require('mongoose')
const cors = require('cors')
const Comment = require('./models/Comment')

const app = express()
const port = 3001
const mongo = '你的MongoDB连接字符串'

app.use(cors())
app.use(express.json())

// 异步处理MongoDB连接，捕获连接错误
const connectDB = async () => {
  try {
    await mongoose.connect(mongo, {
      useNewUrlParser: true,
      useUnifiedTopology: true,
    });
    console.log('成功连接MongoDB');
  } catch (error) {
    console.error('MongoDB连接失败:', error);
    process.exit(1);
  }
}

connectDB();

app.post('/user/post', async (req, res) => {
  try {
    const newComment = new Comment({
      username: req.body.username,
      email: req.body.email,
      user_comment: req.body.user_comment
    });

    await newComment.save();
    res.status(201).json(newComment);
  } catch (err) {
    console.error('保存任务失败:', err);
    res.status(500).json({ error: '服务器错误' });
  }
});

app.get('/get', async(req,res)=>{
  try {
    const commentsList = await Comment.find()
    res.json(commentsList)
  } catch (err) {
    console.error('获取任务列表失败:', err);
    res.status(500).json({ error: '服务器错误' });
  }
})

app.listen(port, () => console.log(`服务器运行在端口 ${port}!`))

修复说明 #

1. 移除重复的JSON解析逻辑，确保数据正常传递到状态更新函数。
2. 前端请求指定完整后端地址，确保请求命中正确接口。
3. 调整状态结构，将后端返回的完整任务数组存入状态，遍历每个任务渲染组件，并添加key属性避免React警告。
4. 新增加载状态、错误提示和空数据场景处理，避免渲染异常。
5. 优化后端MongoDB连接的异步处理，确保捕获连接错误；同时为接口添加错误处理，返回标准化JSON错误信息。

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