import { useState, useEffect } from "react";
import { TodoProvider } from "./contexts/TodoContext";
import TodoForm from "./components/TodoForm";
import TodoItem from "./components/TodoItem";
function App() {
const [todos, setTodos] = useState([]);
const addTodo = (todo) => {
setTodos((prev) => [{ id: Date.now(), ...todo }, ...prev]);
};
const updateTodo = (id, todo) => {
setTodos((prev) =>
prev.map((prevTodo) => (prevTodo.id === id ? todo : prevTodo))
);
};
const deleteTodo = (id) => {
setTodos((prev) => prev.filter((prevTodo) => prevTodo.id !== id));
};
const toggleComplete = (id) => {
setTodos((prev) =>
prev.map((prevtodo) =>
prevtodo.id === id
? { ...prevtodo, completed: !prevtodo.completed }
: prevtodo
)
);
};
useEffect(() => {
const todosLocal = JSON.parse(localStorage.getItem("todos"));
if (todosLocal && todosLocal.length > 0) {
setTodos(todosLocal);
}
}, []);
useEffect(() => {
localStorage.setItem("todos", JSON.stringify("todos"));
}, [todos]);
return (
<TodoProvider
value={{ todos, addTodo, updateTodo, deleteTodo, toggleComplete }}
>
<h2 className="text-center text-3xl font-bold mt-1">Hello</h2>
<div className="bg-[#172842] min-h-screen py-8">
<div className="w-full max-w-2xl mx-auto shadow-md rounded-lg px-4 py-3 text-white">
<h1 className="text-2xl font-bold text-center mb-8 mt-2">
Manage Your Todos
</h1>
<div className="mb-4">
{/* Todo form goes here */}
<TodoForm />
</div>
<div className="flex flex-wrap gap-y-3">
{todos.map((todo) => (
<div key={todo.id} className="w-full">
<TodoItem todo={todo} />
</div>
))}
</div>
</div>
</div>
</TodoProvider>
);
}
export default App;
i'm获取错误todos.map不是一个函数,只有我删除映射的div,该行才会出现错误,然后代码正常工作。 所有其他功能和组件都可以正常工作,那么为什么这不起作用。
请有人解释这一点,Todos是一个数组,那么为什么映射在这里不起作用。
const todosLocal = JSON.parse(localStorage.getItem("todos"));
if (todosLocal && todosLocal.length > 0) {
setTodos(todosLocal);
}
您需要检查是否是一个数组,而不仅仅是长度。
SO:
todosLocal