反应待办事项列表 - 复选框没有改变答案

【问题标题】：React todo list - Checkbox is not changing反应待办事项列表 - 复选框没有改变
【发布时间】：2020-06-14 21:33:50
【问题描述】：

我开始学习 React，我正在学习一个教程。我正在尝试在单击复选框时更改它。我在编写 setState 代码之前检查了 handleChange 函数是否正常工作。我按照教程中的方式完成了所有操作，但是当我单击复选框时，它们并没有改变。看起来我错过了什么。这是代码：

App.js：

import React, { Component } from "react";
import TodoItem from "./TodoItem";
import todosData from "./todosData";

class App extends 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((item) => (
      <TodoItem key={item.id} item={item} handleChange={this.handleChange} />
    ));

    return (
      <div className="todo-list">
          {todoItems}
      </div>
    )
  }
}

export default App;

TodoItem.js：

import React from "react";
import "./index.css";

function TodoItem(props) {
  return (
    <div className="todo-item">
      <input
        type="checkbox"
        checked={props.item.completed}
        onChange={() => props.handleChange(props.item.id)}
      />
      <p>{props.item.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: "Clean gecko tank",
        completed: false
    },
    {
        id: 4,
        text: "Mow lawn",
        completed: true
    },
    {
        id: 5,
        text: "Catch up on Arrested Development",
        completed: false
    }
]

export default todosData

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

实际上问题是你正在改变handleChange 中的回调参数，通常强烈建议避免改变它们，因为它们会导致意外行为。我会重写如下：

class App extends 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) return { ...todo, completed: !todo.completed };
        return todo;
      });
      return {
        todos: updatedTodos
      };
    });
  }

  render() {
    const todoItems = this.state.todos.map(item => (
      <TodoItem key={item.id} item={item} handleChange={this.handleChange} />
    ));

    return <div className="todo-list">{todoItems}</div>;
  }
}

您可以在这里查看结果：https://xd5w9.codesandbox.io/

【讨论】：