Reactjs 本地存储未将上次添加或删除的项目存储到React app中的状态

我是一个新的反应和制作todo应用程序。我正在尝试将我的TODO存储在本地存储器中。但是，当我添加或删除TODO时，刷新页面后，它们都会显示，但我添加/删除的最后一个除外。我能得到一些帮助吗

这是我添加/删除它们的代码和方法

state = {
    todos: []
  }

  componentDidMount() {
    this.setState({ todos: JSON.parse(ls.get('todos')) })
  }

  addTodo = todo => {
    const newText = todo.text.trim()
    if (newText)
      this.setState({
        todos: [todo, ...this.state.todos]
      })
    ls.set('todos', JSON.stringify(this.state.todos))
  }


  toggleComplete = id => {
    this.setState({
      todos: this.state.todos.map((todo) => {
        if (todo.id === id)
          return {
            ...todo,
            complete: !todo.complete
          }
        else {
          return todo
        }
      })
    })
  }

  handleDelete = id => {
    this.setState({
      todos: this.state.todos.filter((todo) => todo.id !== id)
    })
    ls.set('todos', JSON.stringify(this.state.todos))
  }

---

这里的问题是，在设置值时，状态尚未更新

setState

方法有一个回调，该回调在工作完成后执行，因此您可以确保

this.state.todos

已更新

  addTodo = todo => {
    const newText = todo.text.trim()
    if (newText)
      this.setState({
        todos: [todo, ...this.state.todos]
      }, () => ls.set('todos', JSON.stringify(this.state.todos)))
  }

这里也是一样

 handleDelete = id => {
    this.setState({
      todos: this.state.todos.filter((todo) => todo.id !== id)
    }, () => ls.set('todos', JSON.stringify(this.state.todos)))
  }

---

setState异步工作。您可以将设置的值存储在变量中，并将该变量用于setState和ls.set。您还可以使用useState和useEffect将组件重写为功能组件hooks@iofjuupasli对于原语值，建议使用

useState

，在这种情况下，最好的方法应该是使用

useReducer

，如果您迁移到hooksyou wellcome；）