在netlify上部署后，React.js todo应用程序中JSON中位置0的意外令牌u

Question

我正在尝试在netlify上部署react应用程序。在本地，我的react todo应用程序工作良好，本地存储也在持久化数据(本地)。但是当我在netflix上部署web应用程序时，在访问实时链接后，它向我显示了这个错误:&;JSON中的意外令牌u在JSON.parse&;因为它正在检索未定义。我尝试过的解决方案:检查错别字检查控制台中正确显示数据的对象。3:我还在App()函数中保留了getTodoFromLocal函数，并保留了的初始状态const [todos, setTodos] = useState([]);(到空数组)，但这不是在页面重载时持久化数据

my codeApp.js

import React, {useEffect, useState} from 'react';
import './App.css';
import { Header, Form, TodoList } from './components';

// get data from local
const getTodoFromLocal = () => {
if(localStorage.getItem("todos") === null){
localStorage.setItem("todos", JSON.stringify([]));
} else {
try{
let localTodo = localStorage.getItem("todos");
let parsedTodo = JSON.parse(localTodo)
return parsedTodo; 
} catch(error) {
console.log(error);
}
}
}
const App = () => {
// states
const [inputText, setInputText] = useState("");
const [todos, setTodos] = useState(getTodoFromLocal());
const [status, setStatus] = useState("all");
const [filteredTodo, setFilteredTodo] = useState([]);
// run this only once when app loads
useEffect(() => {
getTodoFromLocal();
}, [])
// Run once when app loads and every time when there is any change in todos ot status
useEffect(() => {
filterHandler();
saveToLocal();
}, [todos, status])
// functions
const filterHandler = () =>{
switch (status) {
case 'completed':
setFilteredTodo(todos.filter(todo => todo.completed === true));
break;
case 'incompleted':
setFilteredTodo(todos.filter(todo => todo.completed === false));
break;
default:
setFilteredTodo(todos);
break;
}
}
// save to local storage / set todos;
const saveToLocal = () => {
localStorage.setItem("todos", JSON.stringify(todos));
};

return (
<div className="App">
<Header />
<Form inputText = {inputText} 
setInputText={setInputText} 
todos={todos}  
setTodos={setTodos} 
setStatus={setStatus}
/>
<TodoList 
todos={todos} 
setTodos={setTodos} 
filteredTodo={filteredTodo}
/>
</div>
);
}
export default App;

TodoList.js

import React from 'react';
import TodoItem from './TodoItem';
const TodoList = ({todos, setTodos, filteredTodo}) =>  {
return (
<div className='todo-container'>
<ul className='todo-list'>
{filteredTodo && filteredTodo.map(todo => (
<TodoItem 
key={todo.id} 
todo={todo} 
todos={todos} 
setTodos={setTodos}
text={todo.text}
/>
))}
</ul>
</div>
)
}
export default TodoList;

Form.js

import React from 'react';
import './form.css';
import { v4 as uuidv4 } from 'uuid';

function Form({inputText, setInputText, todos, setTodos, setStatus}) {
const inputHandler = (e) => {
setInputText(e.target.value);
}
const submitHandler = (e) =>{
e.preventDefault();
// generate unique id for todo lists.
const uniqueId = uuidv4(); 
//add todo object on click of button
const addItem = !inputText ? alert("enter somthing")  :  setTodos([
...todos, {id: uniqueId, text: inputText, completed: false }
]);

//reset the input field after adding todo
setInputText("");
return addItem;
}
// filtered todo
const statusTodo = (e) => {
setStatus(e.target.value);
}
return (
<form>
<input  type="text" className="todo-input" onChange={inputHandler} value={inputText}/>
<button className="todo-button" type="submit" onClick={submitHandler}>
<i className="fas fa-plus-square"></i>
</button>
<div className="select">
<select onChange={statusTodo} name="todos" className="filter-todo">
<option value="all">All</option>
<option value="completed">Completed</option>
<option value="incompleted">Incompleted</option>
</select>
<span><i className="fas fa-chevron-down"></i></span>
</div>
</form>
)
}
export default Form;

TodoItem.js

import React from 'react';
import './todo.css';
const TodoItem = ({text, todo, todos, setTodos}) => {
//delete an item;
const deleteHandler = () => {
setTodos(todos.filter(el => el.id !== todo.id))
}
const completeHandler = () => {
setTodos(todos.map((item )=> {
if(item.id === todo.id){
return {
...item, completed: !todo.completed
}
}
return item;
}));
}
return (
<div className='todo'>
<li className={`todo-item ${todo.completed ? 'completed' : "" }`}>{text}</li>
<button className='complete-btn' onClick={completeHandler}>
<i className='fas fa-check'></i>
</button> 
<button className='trash-btn' onClick={deleteHandler}>
<i className='fas fa-trash'></i>
</button> 
</div>
)
}
export default TodoItem;

活动链接:https://clinquant-parfait-ceab31.netlify.app/

Github链接https://github.com/Mehreen57/Todo-app-react

Answer 1

我发现了错误。一步一步来

1. 在setTodosconst [todos, setTodos] = useState(getTodoFromLocal());时，会调用getTodoFromLocal

2. 由于localStorage.getItem("todos")为null，您将todos设置为[]，但不返回任何返回未定义的内容，todos的值为changedtoundefined.

3. 然后你有saveToLocal函数，你将todos存储在localStorage.中，当todos更改时，在useEffect中调用。

4. 待办事项更改为undefined>useEffect被称为>在saveToLocal函数todos(undefined)存储在localStorage.

更新代码:

if (localStorage.getItem("todos") === null) {
localStorage.setItem("todos", JSON.stringify([]));
return []
}