本地存储未存储最后一个添加或删除的项目，信含在react应用程序中的状态

Question

我是新手反应和制作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))
  }

Answer 1

您在这里遇到的问题是，在您设置该值时，状态尚未更新。

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)))
  }