javascript - 标记复选框已完成 - React

Question

首先，我是 React 新手。

我正在尝试构建一个待办事项列表应用程序，仅供练习。

有一个待办事项列表(带有标题、复选框、 并且名为“completed”的属性默认为 false。)

逻辑很简单，当completed属性设置为true时，item将获得直通样式。

我的问题是:

当我标记第一个待办事项时，问题就出现了，一切正常。然后当我转到第二个项目并尝试标记他时，应用程序崩溃了。

my code:


class App extends Component {
  constructor() {
    super()
    this.state = {
      todos: [],
      userType: ""
    }
    this.inputEvent = this.inputEvent.bind(this)
    this.submitEvent = this.submitEvent.bind(this)
  }

  checkMark = (id) => {
    this.setState(oldState => {
      const newTodo = oldState.todos.map(x => {
        if (x.id === id) {
          x.completed = !x.completed
          return x
        }
        console.log(newTodo)
        return newTodo
      })
      return {
        todos: newTodo
      }
    })
  }

Answer 1

您在 map 中返回 newTodo ，但此处未定义

尝试一下

  checkMark = (id) => {
    this.setState(oldState => {
      const newTodo = oldState.todos.map(x => {
        if (x.id === id) {
          x.completed = !x.completed
          return x
        }
        return x
      })
      return {
        todos: newTodo
      }
    })
  }