我已经creted博客API使用以下代码：

const fs = require('fs');  

export default async function handler(req, res) 
{
  let blogs = [];
  try 
  {
    let files=  fs.readdirSync('blogdata');
    files.forEach((file)=>{
      let content =  fs.readFileSync('blogdata/'+file,'utf-8');
      blogs.push(JSON.parse(content));
    });
    res.status(200).json({blogs})
  }
  catch(err)
  {
    console.log(err);
  }
}

当我试图用下面的代码获取数据时：

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);
      setBlogs(json);      
    })

  },[]);

  return (
    <>
    <div>blogs</div>
    
    {blogs.length > 0 ? (
      blogs.map((blog, index) => 
      {
        <p>blog.title</p>
      })
    ): 
    (
      <p>Loading...</p>
    )}
    </>
  )
}

那么它总是显示加载。为了调试，我使用了console log和console.log（'json'，json）;正在显示数据，但未显示在返回部分中。提前感谢！
即使我尝试从API传递静态内容，仍然显示相同。