无法弄清楚如何让新的待办事项列表任务呈现在待办事项列表中(反应)

Question

我是新来的反应者，我边学习边学习。我可能吃得太多了，这听起来很蹩脚，因为这只是一个简单的CRUD应用程序。我正试图在提交表单时将待办事项添加到应用程序中，但我不记得下一步该怎么做了。很抱歉问了这个模棱两可的问题，但我现在不知所措。

import React, { useState } from "react";
function TodoForm({ addTodo }) {
const [input, setInput] = useState("");
const [todo, setTodo] = useState({
id: "",
task: "",
});
function addTodo(props) {
props.onAdd(todo);
setTodo({
id: "",
task: "",
});
}
function handleSubmit(event) {
let id = Math.floor(Math.random() * 15000);
event.preventDefault();
if (todo.task.trim()) {
addTodo({ ...todo, id });
setTodo({ ...todo, task: "" });
}
console.log({
id,
text: input,
});
setInput("");
}
return (
<form onSubmit={handleSubmit}>
<header>What do you have to do today?</header>
<input
type="text"
placeholder="Add a task to your list"
value={input}
onChange={(e) => setInput(e.target.value)}
></input>
<button type="button" value="Submit" onClick={handleSubmit}>
Add task
</button>
</form>
);
}
export default TodoForm;

Answer 1

是否尝试渲染每个TODO项？

您应该从设置所有TODO的字符串数组开始，然后在段落标记(<p>(中映射它们。

像这样：

const [setTodoArray, todoArray] = useState([]);

以及在HTML:中

todoArray.map((todoItem) => <p>{todoItem}</p>)