React中点击映射数组元素切换className且保持选中状态直到再次点击的实现问题

你当前用单个数字类型的index状态存储选中项id，每次更新状态都会覆盖之前的选中值，因此永远只能同时有一个元素处于选中状态。要实现点击切换选中状态、保留其他元素选中样式的需求，需要把状态改为存储所有已选中的id集合。

import { useState } from 'react'
const allTodos = [{id: 1, name: 'whatever user type'}, {}, {}, /* 其余todo项 */] 

export const Todos = (props) => {
  // 状态改为存储已选中的id集合
  const [selectedIds, setSelectedIds] = useState(new Set())

  const toggleCheck = (id) => {
    setSelectedIds(prev => {
      const newSet = new Set(prev)
      if (newSet.has(id)) {
        // 已选中则移除
        newSet.delete(id)
      } else {
        // 未选中则添加
        newSet.add(id)
      }
      return newSet
    })
  }

  return props.allTodos.map((todo) => (
    // 列表项需添加唯一key属性符合React规范
    <div id="item_container" key={todo.id}>
      <button 
        type='button' 
        className={`check_button ${selectedIds.has(todo.id) ? 'checked' : 'not_checked'}`}
        onClick={() => toggleCheck(todo.id)}
      >
        <img src={check} alt="" id="check_img"></img>
      </button>
      <li id="li_item">{todo.name}</li>
    </div>
  ))
}

• 确保每个todo项的id为唯一值，避免选中逻辑出现冲突
• 直接在checked CSS类中定义需要的background属性即可，选中状态下会自动生效

内容的提问来源于stack exchange，提问作者Yash Sharma