Next.js中使用Fetch获取数据后无法渲染页面问题求助

问题根源 #

1. 数据结构不匹配：你的API返回的是包含blogs数组的对象（res.status(200).json({blogs})），但前端直接将整个响应对象赋值给blogs状态，导致blogs是一个对象而非数组。此时blogs.length为undefined，判断条件blogs.length > 0永远不成立，所以页面一直停留在Loading状态。
2. 变量渲染错误：就算数组赋值正确，当前代码里的<p>blog.title</p>只是渲染了字符串"blog.title"，而非实际的博客标题，需要用花括号包裹变量才能读取对应值。

修正后的前端组件代码 #

import React, { useEffect, useState } from 'react'

export default function Blogs()  
{
  const [blogs, setBlogs] = useState([])
  useEffect(()=>{
    console.log('* useEffect *');
    
    fetch('http://localhost:3000/api/blogs')
    .then((res)=>res.json())
    .then((json)=>{ 
      console.log('json ',json);
      // 提取响应对象中的blogs数组赋值给状态
      setBlogs(json.blogs);      
    })

  },[]);

  return (
    <>
    <div>blogs</div>
    
    {blogs.length > 0 ? (
      blogs.map((blog, index) => 
      {
        // 用{blog.title}读取变量，同时给map项添加唯一key
        return <p key={index}>{blog.title}</p>
      })
    ): 
    (
      <p>Loading...</p>
    )}
    </>
  )
}

可选优化：API路由异步化（非当前问题必要项） #

当前API使用同步文件读取方法，可能阻塞事件循环，建议改为异步版本：

const fs = require('fs').promises;
import path from 'path';

export default async function handler(req, res) 
{
  let blogs = [];
  try 
  {
    const dirPath = path.join(process.cwd(), 'blogdata');
    let files = await fs.readdir(dirPath);
    for (const file of files) {
      const content = await fs.readFile(path.join(dirPath, file), 'utf-8');
      blogs.push(JSON.parse(content));
    }
    res.status(200).json({blogs})
  }
  catch(err)
  {
    console.log(err);
    // 新增错误状态码返回，便于前端排查问题
    res.status(500).json({error: 'Failed to load blogs'});
  }
}

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