反应待办事项应用程序："TypeError: t is not iterable"。我错过了什么？

Question

使用useState使用React(vite)构建一个to do应用程序。在尝试实现localStorage时，我遇到了一个错误，我的应用程序在npm run dev服务器上运行良好，但在实时提交时，表单功能被破坏，并抛出TypeError:

index-b568087f.js:61 Uncaught TypeError: t is not iterable
at o (index-b568087f.js:61:377)
at onClick (index-b568087f.js:61:798)
at Object.Ld (index-b568087f.js:37:9855)
at Ad (index-b568087f.js:37:10009)
at Id (index-b568087f.js:37:10066)
at Ds (index-b568087f.js:37:31459)
at Rc (index-b568087f.js:37:31876)
at index-b568087f.js:37:36788
at tc (index-b568087f.js:37:8967)
at Yo (index-b568087f.js:37:33162)

这个对我来说是新的，所以任何帮助都是感激的。下面是我的App.jsx，它包含了我的应用程序的所有代码。

import "./App.css";
// components
import Header from "./Components/Header.jsx";
import { useState, useEffect } from "react";
function App() {
const localList = JSON.parse(localStorage.getItem("list"));
// state with list of todos
const [list, setList] = useState(localList);
useEffect(() => {
localStorage.setItem("list", JSON.stringify(list));
}, [list]);
// state with input value
const [input, setInput] = useState("");
// function to add todos
const addTodo = (todo) => {
const newTodo = {
id: Math.random(),
todo: todo,
};
// add the todo to the list
if (input !== "" && input !== " ") {
setList([...list, newTodo]);
}
// clear input box
setInput("");
};
const submitOnEnter = (e) => {
e.preventDefault();
if (e.key === "Enter") {
if (input === "" || input === " ") {
return;
}
document.getElementById("addTask").click();
}
};
const deleteTodo = (id) => {
// filter out todo with id
const newList = list.filter((todo) => todo.id !== id);
// set list state to be the filtered list
setList(newList);
};
return (
<>
<div className="container">
<Header />
<div className="inputContainer">
<input
type="text"
value={input}
onChange={(e) => setInput(e.target.value)}
id="inputField"
onKeyUp={submitOnEnter}
/>
<button id="addTask" onClick={() => addTodo(input)}>
Add
</button>
</div>
<ul>
{list?.map((todo) => (
<div className="todoItemContainer">
<li className="todoItem" key={todo.id}>
{todo.todo}
</li>
<button
className="deleteTodo"
onClick={() => deleteTodo(todo.id)}
>
&times;
</button>
</div>
))}
</ul>
</div>
</>
);
}
export default App;

最初，我试图解决一个问题，其中。map读取未定义。我通过添加一个三元运算符(list?.map)来检查list是一个数组来解决这个问题。

之后，npm run dev服务器上的一切都继续工作得很好，但是实时提交的功能随后崩溃了。

我已经看过DevTools，我很确定错误是来自调用AddTodo()函数，但我被如何解决它难住了。我已经检查了其他一些Stack Overflow帖子，并且在弄清楚这个问题时遇到了一些麻烦。

当然我不能预览开发服务器，但我已经链接了下面的实时提交。

回购:https://github.com/noahpittman/todo-app-vite-react

提交:https://todoreact-np.netlify.app/

Answer 1

const localList = JSON.parse(localStorage.getItem("list")) || []。这个错误来自...list，因为你的初始列表是null。