Javascript 如何在带有react钩子的复选框上使用onChange事件在map函数内部操作DOM

首先，我从另一个文件中导入一个非常简单的“数据库”对象，该文件中有一个students数组属性。之后，我通过students数组进行映射，以显示window对象上的所有学生。一切都进行得很顺利，直到每次当status的状态变为true时，我都尝试在map函数中的一个div标记上动态更改类名，我希望显示信息，否则div应该保持不可见。在实现下面的代码并尝试勾选该框后，出现错误“无法在布尔值“true”上创建属性“0”。请告诉我我做错了什么。谢谢你对那个案子感兴趣

import React，{useState，useffect}来自“React”
从“./db”导入数据库
导入“./App.css”
常量应用=（）=>{
const[status，setStatus]=useState（database.map）（（student）=>{
返回学生
}))
返回db.students.map（{name，id，email，isChecked}，index）=>{
返回(
{name}
目前
缺席的
早退
迟到
{
设置状态（状态=>
状态[索引]=event.currentTarget.checked
)
}}/>
时间：

)
})
}
导出默认应用程序

设置状态的参数应为：


状态的新值

或


一种函数，它接受以前版本的
状态
，并返回新版本

您将向其传递一个函数，该函数修改收到的status值，然后返回一个布尔值。因此，
status
似乎正在更改为该布尔值，然后，
className
表达式中的
status[index]
实质上是在计算
true[0]
，这导致了错误

要解决此问题，请修复您对
setStatus（）
函数的使用：

setStatus(status => [
    ...status.slice(0, index),     
    event.currentTarget.checked,
    ...status.slice(index + 1)
])

您可能还想试试这个，它不依赖于
事件
属性：

setStatus(status => [
    ...status.slice(0, index),     
    !status[index],
    ...status.slice(index + 1)
])

甚至这个：

setStatus(status => 
    status.map((x, i) => (i === index) ? !x : x)
)

我不认为
状态
在做你认为应该做的事情。使用
useState
时，括号中提供的值将是初始值。在您的
useState
中，您正在映射列表中的每个项目，并返回该学生
是否已被选中
。。。。但是，这只需将第一个学生的
status
设置为
isChecked
的值即可。删除
状态
状态值，并尝试用
isChecked
@RyanSaffer替换
数据库的值。{return student.isChecked}）
是一个（大概）布尔值数组，因此
状态
的初始值将是一个数组。看起来不错。我尝试了你的代码，是的，实际上解决了当前的问题，但是在实现它之后，我在控制台中遇到了另一个错误“警告：出于性能原因，将重用此合成事件。如果您看到了这一点，那么您正在访问一个已发布/无效的合成事件的方法
currentTarget
。这是一个无操作功能。如果必须保留原始合成事件，请使用event.persist（）。“此外，在触发复选框event后，状态数组中的所有值都将更改为undefined。我先前评论中的另一个问题也通过将event.currentTarget保存在变量中，然后使用.checked调用来解决。非常感谢你的帮助@MarcinRygielski好的，您最好使用
onClick
事件而不是
onChange
，并基于以前的状态而不是事件属性进行更改。见我的编辑上面。这似乎是更明确的解决方案tbh。感谢您扩展了以前的解决方案。查看不同的方法确实很有帮助。要消除合成事件被重用错误，您可以执行以下操作：
const checked=event.currentTarget.checked；设置状态（status=>[…status.slice（0，索引），选中，…status.slice（索引+1）]）