我在一个页面中有一个表单,并将该数据发送到我的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
1条答案
按热度按时间ddhy6vgd1#
取代:
应为: