我在將表單中的值推送到我在螢幕上映射的數組時遇到了一些問題。
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/App.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> </> ); })} </> ); }