我目前是反应学习的新手，为什么这个 Map() 不在我的 HTML 中迭代

Question

我从YouTube频道做这个待办事项列表。下面是代码

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();
todolist.push(todo);
console.log(todolist)
settodo("")
}
return(
<div>
<form onSubmit={HandleSubmit}>
<div>
<input type={"text"}  value={todo} onChange={Handletodo}></input>
<button type="submit">Add</button>
</div><br/>
</form>
{todolist.map((item)=>{
<h3>item</h3>
})}
</div>
)
}

为什么我不能迭代todolist.map()返回

这是那个视频的链接https://www.youtube.com/watch?v=eYlC4ReZRCk&list=PLSsAz5wf2lkK_ekd0J__44KG6QoXetZza&index=33

Answer 1

你的语法在地图列表中是错误的，使用{}来渲染变量

{todolist.map((item)=>(
<h3>{item}</h3>
))}