React中如何将<form>数据传入对象数组？提交后列表项为空

核心问题 #

• 你的<input>标签未设置name="input"属性，FormData依赖表单元素的name属性提取值，因此data.get('input')返回undefined，导致列表项显示空白。
• 直接依赖当前message状态更新新数组存在闭包风险，频繁更新时可能拿到旧状态值。
• 用message.length作为ID不可靠，若后续添加删除功能，会出现重复ID的情况。

修复后的代码 #

import React, { useState } from 'react'

function Form(props) {
    const [messages, setMessages] = useState([])

    const addMessageHandler = (event) => {
        event.preventDefault()

        const data = new FormData(event.target);
        const inputValue = data.get('input')

        // 函数式更新确保获取最新状态
        setMessages(prevMessages => [
            ...prevMessages, 
            { id: Date.now(), value: inputValue }
        ])

        // 提交后清空输入框
        event.target.reset()
    }

    return (
        <div>
            <form onSubmit={addMessageHandler}>
                <label>Type a Message</label>
                {/* 新增name属性，与FormData.get的参数对应 */}
                <input type='text' name="input"></input>
                <button type='submit'>Submit</button>
            </form>

            <ul>
                {messages.map(msg => (
                    <li key={msg.id}>{msg.value}</li>
                ))}
            </ul>
        </div>
    )
}

export default Form

关键修改说明 #

• 给输入框添加name="input"，确保FormData能正确读取输入值。
• 使用函数式更新setMessages(prevMessages => ...)，避免闭包导致的状态不一致问题。
• 用Date.now()生成唯一ID，替代message.length，避免ID重复。
• 变量名改为messages，更符合数组语义。
• 添加event.target.reset()，提交后自动清空输入框，优化用户体验。

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