检查复选框在 React 中不起作用

Question

这是 react 中一个简单的 TO-DO 应用程序，它从中App.js获取数据，TodosData.js列表与组件一起显示TodoItem.js。现在可以在渲染时查看复选框和数据。但是当我点击复选框时它不起作用。我尝试handleChange了似乎有效的控制台日志记录功能。似乎handleChange函数内部可能存在我无法弄清楚的问题。

我正在关注 YT 上的 freecodecamp 教程，我也检查了几次，但在这里找不到问题。

App.js代码：

import React from 'react';

import TodoItem from './TodoItem'

import todosData from './todosData'

class App extends React.Component {

  constructor() {

    super ()

    this.state = { todos: todosData }

    this.handleChange = this.handleChange.bind(this)

  }

  handleChange(id) {

    this.setState(prevState => {

      const updatedTodos = prevState.todos.map(todo => {

        if (todo.id === id) {

          todo.completed = !todo.completed

        }

        return todo

      })

      return {

        todos: updatedTodos

      }

    })

  }

  render() {

    const todoItems = this.state.todos.map(itemEach => <TodoItem key = {itemEach.id} itemEach = {itemEach}

      handleChange = {this.handleChange} />)

    return (

      <div className = "todo-list">

        {todoItems}

      </div>

    )

  }

}

export default App;

TodoItem.js代码：

import React from 'react';

function TodoItem(props) {

  return(

    <div className = "todo-item">

      <input type = "checkbox"

        checked={props.itemEach.completed}

        onChange={() => props.handleChange(props.itemEach.id)}

      />

      <p>{props.itemEach.text}</p>

    </div>

  )

}

export default TodoItem

TodosData.js代码：

const todosData = [

  {

    id: 1,

    text: "Take out the trash",

    completed: true

  },

  {

    id: 2,

    text: "Grocery shopping",

    completed: false

  },

  {

    id: 3,

    text: "Clearn gecko tank",

    completed: false

  },

  {

    id: 4,

    text: "Mow lawn",

    completed: true

  },

  {

    id: 5,

    text: "Catch up on Arrested Development",

    completed: false

  }

]

export default todosData

有没有更好的方法来实现这一点？对于像我这样的初学者来说，这种做复选框的方式似乎相当复杂。另外我该如何改进这段代码？

Answer 1

您正在改变handleChange函数中的状态。因此它得到了prevState两次。一次用于原始先前状态，接下来用于您在handleChange.todo通过像这样传播 from 状态，您可能会丢失参考。this.setState(prevState => {&nbsp; const updatedTodos = prevState.todos.map(todo => {&nbsp; &nbsp; const resTodo = { ...todo };&nbsp; &nbsp; if (todo.id === id) {&nbsp; &nbsp; &nbsp; resTodo.completed = !resTodo.completed;&nbsp; &nbsp; }&nbsp; &nbsp; return resTodo;&nbsp; });&nbsp; return {&nbsp; &nbsp; todos: updatedTodos&nbsp; };});这是一个有效的代码框