我正在嘗試使用 ReactJs 創建一個待辦事項串列應用程式，作業正常，localStorage但setItem()除了getItem()空陣列之外什么都不回傳！
- 我使用
|| ""是因為 TypeScript 中的JSON.parse()回傳值string || null。
useEffect(() => {
localStorage.setItem("todos", JSON.stringify(todos));
}, [todos]);
useEffect(() => {
const items = JSON.parse(localStorage.getItem("todos") || "");
if (items) {
setTodos(items);
}
}, []);
這是我提供資料的地方todos
const [todos, setTodos] = useState<todosObj[]>([]);
const [count, setCount] = useState(1);
const [status, setStatus] = useState<"All" | "completed" | "uncompleted">(
"All"
);
const [inputText, setInputText] = useState("");
const [date, setDate] = useState(new Date());
const inputHandler = (e: React.FormEvent<HTMLInputElement>) => {
setInputText(e.currentTarget.value);
};
const submitHandler = (e: React.FormEvent<HTMLButtonElement>) => {
e.preventDefault();
setCount(count 1);
if (inputText !== "") {
setTodos([
...todos,
{
id: count,
text: inputText,
completed: false,
date: date,
},
]);
}
setInputText("");
};
uj5u.com熱心網友回復：
抱歉，我沒有足夠的聲譽來發表評論，所以必須將其發布為答案：
是todos設定的初始資料嗎？如果您可以提供您提供資料的位置，那就更好了todos
uj5u.com熱心網友回復：
我通過這樣初始化todos狀態來解決問題getItem()
：
const [todos, setTodos] = useState<todosObj[]>(
JSON.parse(localStorage.getItem("todos") || "") || []
);
如果有人知道它不起作用的原因，請告訴我。
uj5u.com熱心網友回復：
useEffect(() => {
const stringifyTodos = JSON.stringify(todos)
localStorage.setItem("todos", stringifyTodos);
}, [todos]);
useEffect(() => {
const storedTodos = localStorage.getItem("todos")
const items = JSON.parse(storedTodos);
if (items) {
setTodos(items);
}
}, []);
嘗試這種方式，我認為它會作業。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/462379.html
標籤：javascript 反应 打字稿
上一篇：通用高階函式引數型別