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 调用一起使用，将todos状态设置为“ null”。

只需像这样更改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);
};

javascript npm npm production-environment reactjs reactjs