Question

我正在研究一个待办事项列表应用程序，尝试添加允许用户将待办事项的状态从未完成更改为已完成的方法时遇到了问题

App.js

import React, {useState} from "react";
import Todo from './Todo.js'
import "./styles.css";

const [todos, setTodos] = useState(
    [{id: 0, task: 'Laundry', isCompleted: false},
     {id: 1, task: 'Dishes', isCompleted: true},
     {id: 2, task: 'Clean room', isCompleted: false}])
  
  const completeTodo = (index) => {
    newtodos = [...todos];
    newtodos[index].isCompleted = true;
    setTodos(newtodos)
  }
  const todoList = todos.map(object => {
    return(
     <Todo 
      key={object.id} 
      taskName={object.task} 
      isCompleted={object.isCompleted} 
      clickHandler={completeTodo}
    /> 
   )
 }) 

  return (
    <div className="App">
      <h1>To Do List App</h1>
      <div className="TodoList">
        {todoList}
      </div>
    </div>
  );
}

当然，我将completeTodo方法传递给我的Todo组件。

Todo.js

import React from 'react'

export default function Todo(props) {
  return (
      <div className="TodoItem">
        <label> {props.taskName}
          <input 
          type="checkbox" 
          checked={props.isCompleted ? true : false}
          onClick={props.clickHandler(props.key)}/>
        </label>
        

      </div>
  )

但是当我通过单击复选框测试功能时，会出现以下错误消息： TypeError：无法设置属性'isCompleted'的未定义' 错误指向App.js中我completeTodo方法的第二行。我已附上错误消息的图片。 error message

在反应中切换状态

0 个答案: