React多个复选框共用一个onChange事件报indexOf is not a function如何解决

你遇到的报错核心是isselected的类型从初始数组被错误改成了对象，具体问题和修复方案如下：

错误点列表 #

• 状态更新逻辑错误：你在调用setisselected时给参数包了大括号，原本要存数组，结果变成了{selected: 数组}的对象，对象没有indexOf方法，触发报错。
• 直接修改原状态：直接对isselected做splice、push操作，属于直接变更React状态，不符合不可变更新原则，容易导致视图不更新。
• 复选框属性错误：控制复选框选中状态的属性是checked不是selected，且应该直接传布尔值，不能传函数。
• label关联错误：label的htmlFor属性为空，没有对应输入框的id，点击标签无法触发复选框选中。

修复后完整代码 #

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

export default function App() {
  const [isselected, setIsselected] = useState([])

  const OnChange = (id)=>{
    // 先拷贝原数组，避免直接修改原状态
    let selected = [...isselected];
    let find = selected.indexOf(id)

    if(find > -1){
        selected.splice(find, 1)
    }else {
        selected.push(id)
    }
    // 直接传数组，不要包大括号
    setIsselected(selected)
  }

  return (
    <div className="App">
      <div className="first-search">
        <input
          type="checkbox"
          className="input-1"
          value="Last 7 days"
          name="last seven"
          id= "1"
          onChange={ (e)=> OnChange(e.target.value)}
          {/* 用checked属性，直接传布尔值判断是否选中 */}
          checked={isselected.includes("Last 7 days")}
        />
        <label htmlFor="1">
          Last 7 days
        </label>
      </div>

      <div className="first-search">
        <input
          type="checkbox"
          className="input-1"
          name="last24"
          value="last24"
          id= "2"
          onChange={ (e)=> OnChange(e.target.value)}
          checked={isselected.includes("last24")}
        />
        <label htmlFor="2">
          Last 24 hours 
        </label>
      </div>
    </div>
  );
}

内容的提问来源于stack exchange，提问作者s life