javascript - 如何使用react hooks在其中一个复选框上使用onChange事件来操作map函数内部的DOM

Question

首先，我从另一个文件导入非常简单的“数据库”对象，该文件中有一个学生数组属性。之后，我映射学生数组以在窗口对象上显示所有学生。一切都很顺利，直到每次当状态状态更改为 true 时，我尝试动态更改 map 函数内的 div 标签之一上的类名称，我想显示信息，否则该 div 应该保持不可见。实现下面的代码并尝试勾选该框后，我收到错误“无法在 bool ‘true’上创建属性‘0’”。请告诉我我做错了什么。感谢您对此案的关注。

import React,{ useState,useEffect } from 'react'
import db from './db'
import './App.css'

const App = () => {
 const [status,setStatus] = useState(database.map((student) => {
   return student.isChecked
 }))
 return db.students.map(({name,id,email,isChecked}, index) => {
    return (
      <form key={id} className='form'>
        <h2>
          {name}
        </h2>
        <select name='student_attendance' className='form__dropdown' defaultValue='present'>
          <option value='present'>
            present
          </option>
          <option value='absent'>absent</option>
        </select>
        <div>
          <label htmlFor={id}>Left early</label>
          <input type='checkbox' name='leftEarly' id={id} />
        </div>
        <div>
          <label htmlFor={email}>Arrival late</label>
          <input type='checkbox' name='arrivalLate' id={email} onChange=                 {(event) => {
              setStatus(status =>
                status[index] = event.currentTarget.checked
                )
            }}/>
        </div>
         <div className={status[index] ? 'visible' : 'invisible'>
           <p>time: </p>
         </div>
      </form>
    )
  })
}

export default App

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 1

setStatus 的参数应该是:

• 状态的新值

或

• 采用先前版本的状态并返回新版本的函数

您向其传递一个函数，该函数修改接收到的状态值，然后返回一个 bool 值。因此，status 似乎正在更改为该 bool 值，然后 className 表达式中的 status[index] 本质上是在评估 true[0]，这会导致错误。

要解决此问题，请修复对 setStatus() 函数的使用:

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

您可能还想尝试一下，它不依赖于 event 属性:

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

甚至是这样:

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