我在一个页面中有一个表单，并将该数据发送到我的API，并将其存储在一个对象中的json文件中，我希望导出该对象，以使用map函数呈现所有元素。
add.js:

import React from 'react'
import Layout from '@/components/Layout'
import styles from '@/styles/AddEvent.module.css'

export default function AddEventPage() {

  const submitHanlder = (e) => {
    e.preventDefault();
    const formData = {
      title: e.target.title.value,
      description: e.target.description.value
    }

    fetch('/api/events', {
      method: 'POST',
      body: JSON.stringify(formData)
    });
    console.log(formData)
  }


  return (
    <Layout title='Add New Event'>
        <h1>Add Event</h1>
        <div className={styles.container}>
          <form className={styles.form} action="" onSubmit={submitHanlder}>
            <label className={styles.label}  >Title</label>
            <input type="text" name="title" />
            <label className={styles.label} >Description</label>
            <input type="text" name="description"/>
            <label className={styles.label}htmlFor="">Date</label>
            <input type="date" />
            <button type='submit' >Submit</button>
          </form>
        </div>
    </Layout>
  )
}

events.js:

const handler = async (req , res) => {

    if(req.method === 'POST'){
        await fetch('http://localhost:3001/events', {
            headers: {
                'Content-Type': 'application/json'
            },
            method: 'POST',
            body: req.body
        })
        return res.status(201).json({ message: 'evento agregado' });
    }
    return res.status(400).json({ error: 'no se pudo agregar el evento' });
}

export default handler;

这是我的db.json：在这里我存储了用窗体添加的事件。

{
  "events": [
    {
      "id": 1,
      "title": "Recital coldplay",
      "description": "Recital de coldplay en River"
    },
    {
      "title": "Recital metalica",
      "description": "Recital de metalica en velez",
      "id": 2
    }
  ]
}

我如何导出上面的对象来渲染我前端的所有事件？
这是我尝试过的：
index.js:

import React from 'react'
import Layout from '@/components/Layout'
import events from '../../db.json'

export default function EventsPage() {
  return (
    <Layout>
        <h1>My Events</h1>
        <div>
          {events.map((event) => {
            return <h1>{event.title}</h1>
          })}
        </div>
    </Layout>
  )
}

但我得到这个错误：TypeError: _db_json__WEBPACK_IMPORTED_MODULE_3__.map is not a function