Javascript React build会在生产中产生错误

我是一个新的反应，我遵循了一个ToDo网络应用程序的教程。完成后，我在终端上没有错误地为生产构建了它。当我试图静态打开一个serve-s构建以在本地查看它时，就会出现这个问题。最初，我对内容有了一个粗略的了解，然后弹出了两个错误，这两个错误在NPMStartServer的开发中是不存在的。 错误是：

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;

发展观 静态本地服务器中的生产版本

---

您确定您的本地存储中有待办事项吗

此函数假定您的本地存储中有TODO，而本地存储中可能没有TODO

const getLocalTodos = () => {
    setTodos(JSON.parse(localStorage.getItem("todos")));
};

没有本地存储中的TODO

JSON.parselocalStorage.getItemtodos//返回未定义的

这会弄乱你的todos状态，这是一个数组。

---

因此。未定义的长度。

您确定本地存储中有TODO吗

此函数假定您的本地存储中有TODO，而本地存储中可能没有TODO

const getLocalTodos = () => {
    setTodos(JSON.parse(localStorage.getItem("todos")));
};

没有本地存储中的TODO

JSON.parselocalStorage.getItemtodos//返回未定义的

这会弄乱你的todos状态，这是一个数组。 因此。未定义的长度。

如果localStorage中没有todos字段，则将useEffect与getLocalTodos调用一起为todos状态设置空值

只需像这样更改getLocalTodos：

const getLocalTodos = () => {
    setTodos(JSON.parse(localStorage.getItem("todos")) || []);
};

如果localStorage中没有todos字段，则useEffect with getLocalTodos调用会为todos状态设置空值

只需像这样更改getLocalTodos：

const getLocalTodos = () => {
    setTodos(JSON.parse(localStorage.getItem("todos")) || []);
};

---

当第一次渲染应用程序时。您可以从localStorage获取待办事项列表。但这没什么。因此，您的代码总是设置为toos，这种情况下toos将为null

组件应用程序应检查：

const getLocalTodos = () => {
    const cached = localStorage.getItem("todos") ? JSON.parse(localStorage.getItem("todos")) : null;

if (cached === null)
    return;

setTodos(cached);
};

---

当第一次渲染应用程序时。您可以从localStorage获取待办事项列表。但这没什么。因此，您的代码总是设置为toos，这种情况下toos将为null

组件应用程序应检查：

const getLocalTodos = () => {
    const cached = localStorage.getItem("todos") ? JSON.parse(localStorage.getItem("todos")) : null;

if (cached === null)
    return;

setTodos(cached);
};