React入门疑问：为何todolist.map()无法在页面迭代渲染？

你的代码存在四个核心问题，导致map方法无法正确渲染内容：

• 直接修改State数组：React要求state是不可变的，不能用todolist.push(todo)直接修改原数组，这种操作不会触发组件重新渲染。必须通过settodolist方法，基于原数组创建新数组来更新state。
• Map回调未返回JSX元素：你在map里用了大括号{}包裹逻辑，但没有显式返回<h3>元素，React无法识别要渲染的内容。
• 未正确引用变量：<h3>item</h3>里的item是字符串字面量，并非变量，需用{}包裹才能显示实际的待办文本。
• 缺少列表元素的key属性：React渲染列表时要求每个元素有唯一key，这是性能优化和避免警告的必要操作。

修复后的完整代码：

import { useState } from "react";

export default function Todo(){
    const [todo, setTodo] = useState("");
    const [todoList, setTodoList] = useState([])

    const handleTodo = (event) => {
        setTodo(event.target.value)
    }
    const handleSubmit = (event) => {
        event.preventDefault();
        // 创建新数组更新state，避免直接修改原数组
        setTodoList([...todoList, todo]);
        setTodo("")
    }
    return(
        <div>
        <form onSubmit={handleSubmit}>
            <div>
                <input type="text" value={todo} onChange={handleTodo} />
                <button type="submit">Add</button>
            </div><br/>
        </form>
        {todoList.map((item, index) => (
            // 添加key，正确渲染变量
            <h3 key={index}>{item}</h3>
        ))}
        </div>
    )
}

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