Arrays 将阵列状态持久化到本地存储

我用React构建了一个简单的待办事项列表应用程序。待办事项列表任务保存在状态为的数组中。我希望能够在刷新浏览器后保留相同的待办事项列表数组。为此，我尝试在项目中实现本地存储。将todo阵列设置为本地存储。但是，在插入以下代码后，应用程序中断，我得到一个错误，即props.todos.map不是函数

  componentDidMount() {
    const todos = localStorage.getItem("todos");
    this.setState({ 
      ...this.state.todos, 
      todos });
  }

有人能帮我用本地存储代码解决这个问题吗？下面是该组件App.js的其余代码。我将在下面列出其他组件的代码，以防万一，这有助于我找到答案，但我很确定问题出在App.js中，我在上面发布的代码片段中的某个地方。当我把这段代码注释掉时，应用程序恢复到以前的工作状态，但很明显，我仍然无法保持这种状态

App.js：

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      todos: [
        {
          task: "learn how to fly drone",
          id: 1,
          completed: false
        }, 
        {
          task: "learn React class components",
          id: 2,
          completed: false
        },
        {
          task: "practice editing videos",
          id: 3,
          completed: false
        },
        {
          task: "read Ten Years A Nomad",
          id: 4,
          completed: false
        }
    ],
      todo: ''
    }
  }

  inputChangeHandler = event => {
    this.setState({[event.target.name]: event.target.value})
  }

  addTask = event => {
    event.preventDefault();
    let newTask = {
      task: this.state.todo,
      id: Date.now(),
      completed: false
    };
    this.setState({
      todos: [...this.state.todos, newTask],
      todo: ''
    })
    const { todos } = this.state;
    localStorage.setItem("todos", todos);
  }

  toggleComplete = itemId => {
    const todos = this.state.todos.map(todo => {
      if (todo.id === itemId) {
        todo.completed = !todo.completed
      }
      return todo
    });
    this.setState({todos, todo: ''})
  }

  clearCompleted = e => {
    e.preventDefault();
    const todos = this.state.todos.filter(item => !item.completed);
    this.setState({
      ...this.state,
      todos
    })
  }

  componentDidMount() {
    const todos = localStorage.getItem("todos");
    this.setState({ 
      ...this.state.todos, 
      todos });
  }

  render() {
    return (
      <div className="App">
        <div className="header">
          <h2 className="title">Welcome to your Todo App!</h2>
          <TodoForm todos={this.state.todos} value={this.state.todo} inputChangeHandler={this.inputChangeHandler} addTask={this.addTask} clearCompleted={this.clearCompleted}/>
        </div>
        <TodoList 
          todos={this.state.todos} 
          toggleComplete={this.toggleComplete} />
      </div>
    );
  }
}

export default App;

TodoList.js：

const TodoList = props => {
    return (
        <ul className="todo-list">
            {props.todos.map((todo, id) => (
                    <Todo 
                        todo={todo} 
                        key={id} 
                        toggleComplete={props.toggleComplete} 
                    />
            ))}
        </ul>
    )
}

export default TodoList;

Todo.js：

const Todo = props => {
    return (
            <li 
                className={props.todo.completed ? "completed-todos" : "todos"}
                style={{textDecoration: props.todo.completed ? 'line-through' : 'none'}}
                key={props.todo.id}
                onClick={() => {
                    props.toggleComplete(props.todo.id)
                }}
            >
                {props.todo.task}
            </li>
    )
}

export default Todo;

TodoForm.js：

const TodoForm = props => {
    return (
        <form className="add-form">
            <input 
                className="add-input"
                name="todo" 
                value={props.value} 
                type="text" 
                onChange={props.inputChangeHandler} 
                placeholder="Enter new task" />
            <button className="add-button" onClick={props.addTask}>Add Todo</button>
            <button className="clear-button" onClick={props.clearCompleted}>Clear Completed</button>
        </form>
    )
}

export default TodoForm;

---

LocalStorage存储键值对。所以，要存储javascript对象，需要使用JSON.stringifyobject=>String对其进行序列化，要从localStorage检索项，需要使用JSON.parseString=>object再次转换为对象 因此，更改addTask和componentDidMount如下所示：

  addTask = event => {
    event.preventDefault();
    let newTask = {
      task: this.state.todo,
      id: Date.now(),
      completed: false
    };
    this.setState(
      {
        todos: [...this.state.todos, newTask],
        todo: ""
      },
      () => {
        localStorage.setItem("todos", JSON.stringify(this.state.todos));
      }
    );
  };

  componentDidMount() {
    const todos = localStorage.getItem("todos");
    if (todos) this.setState({ todos: JSON.parse(todos) });
  }

---

这是包含固定版本

本地存储密钥的临时密钥，值始终为字符串。您必须使用转换为Array。我将addTask onClick函数更改为包含JSON.stringify，将componentDidMount部分更改为包含JSON.parse。现在它抛出了一个不同的错误：跨原点错误。React没有访问权限…我做了我认为是你做的事情，现在我得到了一个跨原点错误。我检查了你的代码沙盒四五次。出于某种原因，我的componentDidMount调用破坏了代码。我认为这是因为您的本地存储中已经有过去的todos项。请转到并删除旧项。如果你有沙盒把链接放在这里，那就是它。已清除浏览器历史记录和cookies等，问题已解决。谢谢不客气，您不必清除浏览器历史记录，只需按F12键转到“开发人员工具”，然后转到“应用程序”选项卡即可。在存储部分，展开本地存储。之后，您将在那里看到所有浏览器的本地存储。