Next.js中如何导出对象渲染事件列表？解决map函数报错

错误原因 #

你直接导入的db.json是一个包含events数组的对象，而非数组本身。map是数组专属方法，对对象调用必然触发报错。

解决方案 #

1. 确认db.json的结构 #

首先保证你的db.json格式正确，示例结构如下：

{
  "events": [
    { "id": 1, "title": "测试活动", "date": "2024-06-01" },
    { "id": 2, "title": "线下沙龙", "date": "2024-06-10" }
  ]
}

2. 正确导入并获取events数组 #

在index.js中，导入db.json后需访问它的events属性提取数组：

import db from '../db.json';

export default function Home() {
  // 取出events数组
  const events = db.events;

  return (
    <div className="container">
      <h1>活动列表</h1>
      <ul>
        {events.map(event => (
          <li key={event.id} className="event-item">
            <h2>{event.title}</h2>
            <p>日期：{event.date}</p>
          </li>
        ))}
      </ul>
    </div>
  );
}

3. 确保API路由写入格式正确 #

你的events.js API路由在写入db.json时，要保证是更新整个对象的events数组，而非直接覆盖成数组。示例代码：

import fs from 'fs';
import path from 'path';

export default function handler(req, res) {
  if (req.method === 'POST') {
    const dbPath = path.join(process.cwd(), 'db.json');
    // 读取现有数据
    const dbData = JSON.parse(fs.readFileSync(dbPath, 'utf8'));
    // 添加新活动到events数组
    dbData.events.push({
      id: Date.now(), // 用时间戳作为唯一ID
      ...req.body
    });
    // 写回db.json
    fs.writeFileSync(dbPath, JSON.stringify(dbData, null, 2));
    res.status(200).json({ message: '活动添加成功' });
  } else {
    res.status(405).json({ message: '仅支持POST请求' });
  }
}

4. 实时获取最新数据（可选） #

如果需要页面实时展示API添加的最新活动，不要直接静态导入db.json，而是通过getServerSideProps在服务器端读取数据：

import fs from 'fs';
import path from 'path';

export async function getServerSideProps() {
  const dbPath = path.join(process.cwd(), 'db.json');
  const dbData = JSON.parse(fs.readFileSync(dbPath, 'utf8'));
  return {
    props: { events: dbData.events }
  };
}

export default function Home({ events }) {
  return (
    <div className="container">
      <h1>活动列表</h1>
      <ul>
        {events.map(event => (
          <li key={event.id} className="event-item">
            <h2>{event.title}</h2>
            <p>日期：{event.date}</p>
          </li>
        ))}
      </ul>
    </div>
  );
}

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