Reactjs 反应传球道具

目前，它给了我一个错误，说isCompleted是未定义的

todo.isCompleted=todo.isCompleted？假：真

上面的代码就是引发错误的代码

我得到的建议是，在呈现Todo组件时，在App.js中传递todoIndex道具

我不知道该怎么做。有什么建议吗

import React，{Component}来自'React'；
导入“/App.css”；
从“./components/ToDo.js”导入ToDo；
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
待办事项：[
{说明：'遛猫'，已完成：正确}，
{说明：'把盘子扔掉'，已完成：错误}，
{说明：'买新菜'，已完成：错误}，
新密码说明：“”
};
}
deleteToDo（deleteToDo）{
console.log（this）；
让newToDos=this.state.todos.filter（（todo）=>{
返回todo！==删除todo
} )
this.setState（{todos:newToDos}）；
}
手变（e）{
this.setState（{newTodoDescription:e.target.value}）
}
handleSubmit（e）{
e、 预防默认值（）；
如果（！this.state.newTodoDescription）{return}
const newTodo={description:this.state.newTodoDescription，isCompleted:false}；
this.setState（{todos:[…this.state.todos，newTodo]，newTodoDescription:''}）；
}
切换完成（索引）{
const todos=this.state.todos.slice（）；
常数todo=todo[索引]；
todo.isCompleted=todo.isCompleted？false：true；
this.setState（{todos:todos}）；
}
render（）{
返回(

{this.state.todos.map（（todo，index）=>
this.deleteToDo（todo）}/>
)}

此.handleSubmit（e）}>
this.handleChange（e）}/>
);
}
}
导出默认应用程序；

ToDo.js

import React，{Component}来自'React'；
类ToDo扩展组件{
toggleComplete=（）=>{
this.props.toggleComplete（this.props.todoIndex）
}
render（）{
返回(

{this.props.description}
X

);
}
}
导出默认ToDo；

要将索引传递给

ToDo

组件，请添加另一个道具：

<ToDo key={index} todoIndex={index} ... />

此外，您正在对

toggleComplete

函数中的todo对象进行变异，而不是：

todo.isCompleted = todo.isCompleted ? false : true;

最好这样做：

const todos[index] = {...todo, isCompleted: !todo.isCompleted }

或使用

对象。分配
：

const todos[index] = Object.assign({}, todo, {isCompleted: !isCompleted})

我认为Max Kurtz的回答也是正确的，
这个
绑定似乎有问题。在构造函数中绑定
toggleComplete
函数，或使用箭头函数确保
此
不会咬到您。
要将索引传递给
ToDo
组件，请添加另一个道具：

<ToDo key={index} todoIndex={index} ... />

此外，您正在对
toggleComplete
函数中的todo对象进行变异，而不是：

todo.isCompleted = todo.isCompleted ? false : true;

最好这样做：

const todos[index] = {...todo, isCompleted: !todo.isCompleted }

或使用
对象。分配
：

const todos[index] = Object.assign({}, todo, {isCompleted: !isCompleted})

我认为Max Kurtz的回答也是正确的，
这个
绑定似乎有问题。在构造函数中绑定
toggleComplete
函数，或使用箭头函数确保
此
不会咬到您。
感谢您的帮助。我理解更改三元表达式，但它给了我一个错误，即索引是一个致命的意外标记。关于这一点，您的最后评论是，我应该尽可能避免使用它，使用箭头函数的示例是什么？在整个程序中用箭头函数替换这个绑定会被认为是更好的实践或惯例吗？您可以使用三元组，这很好。您没有显示ToDo组件实现，因此我只能猜测。我假设它正在调用toggleComplete函数。但该函数需要todo的索引，而todo组件不知道该索引，因为您没有将其作为道具传递。已添加。谢谢！因此，调用
this.props.toggleComplete
时，似乎已经在ToDo组件中传递了
this.props.todoIndex
。但是，在应用程序组件中呈现这些ToDo组件时，您没有指定
todoIndex
prop。在这一行中
感谢您的帮助。我理解更改三元表达式，但它给了我一个错误，即索引是一个致命的意外标记。关于这一点，您的最后评论是，我应该尽可能避免使用它，使用箭头函数的示例是什么？在整个程序中用箭头函数替换这个绑定会被认为是更好的实践或惯例吗？您可以使用三元组，这很好。您没有显示ToDo组件实现，因此我只能猜测。我假设它正在调用toggleComplete函数。但该函数需要todo的索引，而todo组件不知道该索引，因为您没有将其作为道具传递。已添加。谢谢！因此，调用
this.props.toggleComplete
时，似乎已经在ToDo组件中传递了
this.props.todoIndex
。但是，在应用程序组件中呈现这些ToDo组件时，您没有指定
todoIndex
prop。在这一行