使用Axios连接前后端但数据无法渲染，请求排查问题

后端代码（数据获取与创建） #

export const getPosts = async (req, res, next) => {
    
    try {
        const post = await Post.find()
        if(!post) return next(createError('No Posts Found'))
        res.status(200).json(post)  
    } catch (error) {
        next(error)
    }
}

export const createPost = async (req, res, next) => {
    const body = req.body
    try {
        const post = new Post({ ...body })
        if(!post) return next(createError('Cannot create Post'))
        await post.save()
        return res.status(200).json(post) 
    } catch (error) {
        next(error)
    }
}

注：createPost函数仅在后端使用，未在前端调用。

Post模型Schema #

import mongoose from "mongoose";

const PostSchema = new mongoose.Schema({
    img: {type: String, required: true},
    title: {type: String, required: true},
    desc: {type: String, required: true},
    date: {type: String, default: Date},
}, {
    timestamps: true
})

export default mongoose.model("Post", PostSchema);

前端代码（数据请求与渲染） #

数据请求部分 #

const [events, setEvents] = useState([])
const [loading, setLoading] = useState(true)

const url = 'http://localhost:6000/api/events'

useEffect(() => {
    const getEvents = async () => {
        const { data: res } = await axios.get(url)
        setEvents(res)
    };
    getEvents()
}, [])

页面渲染部分 #

{loading ? <h1>Loading Events...</h1> : 
    <div> 
        {events.map(event => (
        <div>
        <div>
        <div key={event._id}>
            <img src={event.img} alt="Jamil the founder" />
            <div>
            <p>{event.title}</p>
            <p>{event.desc}</p>
            </div>
        </div>

        </div>
        </div>
        ))}               
    </div>}

数据获取与控制台情况 #

• 数据请求返回状态码200，后端成功返回数据数组
• 控制台可看到获取到的events数据，但页面始终显示Loading状态

后端连接配置 #

import dotenv from 'dotenv';
import mongoose from 'mongoose';
import postRoutes from './Routes/post.js'
import cors from 'cors'

const app = express();
app.use(express.json())
app.use(express.urlencoded({ extended: true }));

dotenv.config()

const PORT = process.env.PORT || 8000;

mongoose.connect(process.env.DATABASE_ACCESS,  {
    useNewUrlParser: true,
    useUnifiedTopology: true,
  }, () => console.log('Database Connected'))

app.use((err, req, res, next) => {
    const status = err.status || 500
    const message = err.message || "something went wrong"
    return res.status(status).json({
        success: false,
        status,
        message
    })
})

app.use(
    cors({
      methods: ["GET", "POST"],
      credentials: true,
    })
  );

app.use('/api', postRoutes)

app.listen(PORT, () => console.log(`Server running on port ${PORT}`))

核心问题及解决方法 #

1. Loading状态未更新
   前端请求完成后未将loading状态设为false，导致页面一直停留在加载提示，无法进入渲染逻辑。修复代码：

   useEffect(() => {
       const getEvents = async () => {
           try {
               const { data: res } = await axios.get(url)
               setEvents(res)
           } catch (err) {
               console.error('数据请求失败:', err)
           } finally {
               setLoading(false) // 无论请求成败都更新loading状态
           }
       };
       getEvents()
   }, [])
   

2. 路由路径可能不匹配
   后端挂载的路由是/api + postRoutes中的路径，若postRoutes里getPosts对应的路由是/posts，则前端请求的/api/events路径错误，需改为/api/posts。请检查postRoutes的具体配置，确保前后端请求路径一致。

3. 缺失错误处理
   原前端请求无错误捕获逻辑，若请求失败（如跨域、后端报错），无法定位问题，也不会更新loading状态。上述修复代码已添加错误捕获，便于排查问题。

4. 数据字段验证
   确认后端返回的每个数据对象包含_id、img、title、desc字段，避免渲染时因字段缺失导致内容不显示。

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