我在将表单中的值推送到我在屏幕上映射的数组时遇到了一些问题。
const ForumTopic = [
{
title: "第一篇帖子",
messages: "测试",
author: "Dagger",
count: 1,
date: "02/16",
},
];
const [topic, setTopic] = useState(ForumTopic);
将ForumTopic存储在状态中，以便在点击下面的提交按钮后添加条目并在屏幕上显示。
const addTopic = (e) => {
e.preventDefault();
setTopic([...topic, e.target.value]);
};
<form onSubmit={addTopic}>
创建主题标题
<label htmlFor="title">
<input id="title"></input>
</label>
编写您的消息
<label htmlFor="message">
<textarea id="message"></textarea>
</label>
<label htmlFor="author">
<input id="author" defaultValue="Dagger" hidden></input>
</label>
<label htmlFor="count">
<input id="count" defaultValue="1" hidden></input>
</label>
<label htmlFor="date">
<input id="date" defaultValue="02/16/2023" hidden></input>
</label>
<button type="submit">
发布新消息
</button>
</form>
这是我的代码和表单。代码的目的是将表单中每个标签的值推送到topic数组中创建一个新对象。我希望将所有内容存储在一个新对象中，每个标签的id与每个对象的名称（标题、作者、日期等）匹配，但由于某种原因，我只得到了未定义的错误。
问题在于你的addTopic函数中：
e.target.value始终为undefined
要访问数据，你需要这样做：
const addTopic = (e) => { e.preventDefault() const myData = { title: e.target.title.value, message: e.target.message.value } setTopic(prev => [...prev, myData]) }一种简单的方法是这样做。
您需要使用input的onChange获取到您正在获取的值。
示例链接：https://stackblitz.com/edit/react-8r9f8l?file=src%2FApp.js
import React, { useState } from 'react'; const ForumTopic = [ { title: 'First Post', messages: 'test', author: 'Dagger', count: 1, date: '02/16', }, ]; export default function App() { const [topic, setTopic] = useState(ForumTopic); const [inputObj, setInputObj] = useState({ title: '', messages: '', author: 'Dagger', count: 1, date: '02/16', }); const handleChange = (event) => { setInputObj((curr) => ({ ...curr, [event.target.name]: event.target.value, })); }; const addTopic = (e) => { e.preventDefault(); setTopic([...topic, inputObj]); }; return ( <> <form onSubmit={addTopic}> <label htmlFor="title"> 创建一个主题标题 <input id="title" name="title" value={inputObj.title} onChange={handleChange} ></input> </label> <label htmlFor="message"> 写下您的消息 <textarea id="message" name="messages" value={inputObj.messages} onChange={handleChange} ></textarea> </label> <label htmlFor="author"> <input id="author" name="author" defaultValue="Dagger" hidden></input> </label> <label htmlFor="count"> <input id="count" name="count" defaultValue="1" hidden></input> </label> <label htmlFor="date"> <input id="date" name="date" defaultValue="02/16/2023" hidden></input> </label> <button type="submit">发布新消息</button> </form> {topic.map((item) => { return ( <> <p>{item.title}</p> <p>{item.messages}</p> <p>{item.author}</p> <p>{item.count}</p> <p>{item.date}</p> <span>------------</span> </> ); })} </> ); }