如何解决React build在生产中产生错误
我是React的新手,并且已经按照ToDo Web应用程序的指南进行操作。完成后,我将其构建为可正常生产的终端。当我尝试使用serve -s build
静态打开以在本地查看时,会发生此问题。最初,我了解了内容,然后弹出了两个错误,这些错误在npm start server
开发中不存在。
错误是:
react-dom.production.min.js:209 TypeError: Cannot read property 'length' of null
at App.js:31
at ro (react-dom.production.min.js:211)
at vu (react-dom.production.min.js:257)
at t.unstable_runWithPriority (scheduler.production.min.js:19)
at Wl (react-dom.production.min.js:122)
at hu (react-dom.production.min.js:257)
at react-dom.production.min.js:256
at j (scheduler.production.min.js:17)
at MessagePort.E.port1.onmessage (scheduler.production.min.js:14)
Za @ react-dom.production.min.js:209
scheduler.production.min.js:14 Uncaught TypeError: Cannot read property 'length' of null
at App.js:31
at ro (react-dom.production.min.js:211)
at vu (react-dom.production.min.js:257)
at t.unstable_runWithPriority (scheduler.production.min.js:19)
at Wl (react-dom.production.min.js:122)
at hu (react-dom.production.min.js:257)
at react-dom.production.min.js:256
at j (scheduler.production.min.js:17)
at MessagePort.E.port1.onmessage (scheduler.production.min.js:14)
从消息中我了解到故障部分在我的
App.js
import React,{ useState } from "react";
import "./App.css";
//Importing Components
import Form from "./Components/Form";
import ToDoList from "./Components/ToDoList";
function App() {
// eslint-disable-next-line
const [inputText,setInputText] = useState("");
const [todos,setTodos] = useState([]);
const [status,setStatus] = useState("");
const [filterTodos,setFilterTodos] = useState([]);
const getLocalTodos = () => {
setTodos(JSON.parse(localStorage.getItem("todos")));
};
React.useEffect(() => {
switch (status) {
case "completed":
setFilterTodos(todos.filter((todo) => todo.completed === true));
break;
case "uncompleted":
setFilterTodos(todos.filter((todo) => todo.completed === false));
break;
default:
setFilterTodos(todos);
break;
}
if (todos.length !== 0) {
localStorage.setItem("todos",JSON.stringify(todos));
}
},[todos,status]);
React.useEffect(() => {
getLocalTodos();
},[]);
return (
<React.Fragment>
<header>{inputText}</header>
<Form
setStatus={setStatus}
todos={todos}
setTodos={setTodos}
InputText={inputText}
setInputText={setInputText}
/>
<ToDoList filterTodos={filterTodos} setTodos={setTodos} todos={todos} />
</React.Fragment>
);
}
export default App;
我将数据保存到localStorage的部分。我正在检查数组是否为零,以防止useEffect在第一次加载时清空localStorage数据。 如何在生产版本中解决该问题?
在下面,我附加了其余代码:
ToDoList.js
import React from "react";
import ToDo from "./ToDo";
const ToDoList = (props) => {
return (
<div className="todo-container">
<ul className="todo-list">
{props.filterTodos.map((todo) => {
return (
<ToDo
todo={todo}
todos={props.todos}
setTodos={props.setTodos}
key={todo.id}
text={todo.text}
/>
);
})}
</ul>
</div>
);
};
export default ToDoList;
ToDo.js
import React from "react"
const ToDo = props => {
const deleteNote = () => {
props.setTodos(props.todos.filter(e=>e.id !== props.todo.id))
}
const completedHandler = () =>{
props.setTodos(
props.todos.map(item =>{
if(item.id === props.todo.id){
return {
...item,completed: !item.completed
}
}
return item
})
)
}
return (
<div className="ToDo">
<li className={`todo-item ${props.todo.completed ? "cool" : "notCool"}`}>{props.text}</li>
<button onClick={completedHandler} className='complete-btn'>
Complete </button>
<button onClick={deleteNote} className='trash-btn'>
Trash </button>
</div>
)
}
export default ToDo
Form.js
import React from "react";
const Form = (props) => {
const InputTextHandler = (e) => {
props.setInputText(e.target.value);
};
const addNote = (e) => {
e.preventDefault();
props.setTodos([
...props.todos,{ text: props.InputText,completed: false,id: Math.random() },]);
props.setInputText("");
console.log(props.InputText);
};
const statusHanlder = (e) => {
props.setStatus(e.target.value);
};
return (
<form>
<input
value={props.InputText}
onChange={InputTextHandler}
type="text"
className="todo-input"
/>
<button onClick={addNote} className="todo-button" type="submit">
<i className="fas fa-plus-square">+</i>
</button>
<div className="select">
<select onChange={statusHanlder} name="todos" className="filter-todo">
<option value="all">All</option>
<option value="completed">Completed</option>
<option value="uncompleted">Uncompleted</option>
</select>
</div>
</form>
);
};
export default Form;
解决方法
确定要在localStorage中执行任务吗?
此功能假定您在localStorage中有待办事项,而这可能没有。
const getLocalTodos = () => {
setTodos(JSON.parse(localStorage.getItem("todos")));
};
在本地存储中没有待办事项
JSON.parse(localStorage.getItem("todos")) // returns undefined.
会弄乱您的待办事项状态,该状态应该是一个数组。
因此.length
不确定。
如果localStorage内没有任何 todos 字段,则将
只需像这样更改getLocalTodos:
const getLocalTodos = () => {
setTodos(JSON.parse(localStorage.getItem("todos")) || []);
};
,
首次渲染App时。您可以从localStorage获取待办事项列表。但这没什么。因此,您的代码始终设置为todos,这种情况下的totos将为null
。
Component App应该检查:
const getLocalTodos = () => {
const cached = localStorage.getItem("todos") ? JSON.parse(localStorage.getItem("todos")) : null;
if (cached === null)
return;
setTodos(cached);
};
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。