React 18中表单提交后map函数失效问题求助

你的问题出在两个关键细节上，直接导致提交表单后tasks状态类型异常，无法调用map方法：

1. Array.push()的返回值误用 #

在handleSubmit函数中，你写了：

setTasks([...tasks].push({ id: 3, name: newTask }));

Array.push()方法的返回值是新数组的长度（数字类型），而不是修改后的数组本身。这就导致调用setTasks后，tasks的状态从原本的数组变成了数字，数字没有map方法，自然抛出TypeError: tasks.map is not a function。

正确的做法是用扩展运算符直接创建包含新任务的新数组，或者使用concat方法：

// 方式1：扩展运算符（推荐）
setTasks([...tasks, { id: 3, name: newTask }]);

// 方式2：concat方法
setTasks(tasks.concat({ id: 3, name: newTask }));

这两种方式都会返回一个新数组，保证tasks状态始终是数组类型。

2. 函数组件中错误使用this #

你的input onChange事件里写了this.event.target.value，但React函数组件中不存在this，应该直接通过事件参数e获取输入值：

<input type="text" onChange={(e) => setNewTask(e.target.value)} />

修正后的完整代码 #

import { useState } from 'react';

function App() {
    const [newTask, setNewTask] = useState('');
    const [tasks, setTasks] = useState([
        {
            id: 1,
            name: 'Butter',
        },
        {
            id: 2,
            name: 'Milk',
        },
    ]);

    const handleSubmit = (e) => {
        e.preventDefault();
        // 用扩展运算符创建新数组并添加任务
        setTasks([...tasks, { id: 3, name: newTask }]);
        // 可选：清空输入框
        setNewTask('');
    };

    return (
        <>
            <h1>Task Manager</h1>
            <form className="newtask-form" onSubmit={handleSubmit}>
                <input type="text" value={newTask} onChange={(e) => setNewTask(e.target.value)} />
                {/* 建议添加提交按钮，否则需要按回车提交 */}
                <button type="submit">Add Task</button>
            </form>
            <ul>
                {tasks.map((task, index) => {
                    return <li key={index}>{task.name}</li>;
                })}
            </ul>
        </>
    );
}

export default App;

额外建议：给input加上value={newTask}做成受控组件，同时添加提交按钮，提升用户体验。

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