标记复选框已完成 - 反应

Question

首先，我是 React 新手。

我正在尝试构建一个待办事项列表应用程序，只是为了练习。

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

逻辑很简单，当completed属性变为true时，item就会得到一个line-through样式。

我的问题是：

当我标记第一个待办事项时，问题就来了，一切正常。 然后当我转到第二项并尝试标记他时，应用程序会中断。

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

您在此处未定义的地图中返回 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
      }
    })
  }