Reactjs 在 React 中使用复选框管理状态

选中复选框时，我需要创建此类对象

{
"targets": [
    {
      "kind": "foo",
      "channelId": "-897",
      "quote": "true",
      "gatewayName": "bbb"
    },{
      "kind": "bar",
      "channelId": "-1123",
      "quote": "true",
      "gatewayName": "aaa"
     }
   ]
}

我给我的朋友们准备了这个片断

{gateways ? gateways.map((g) => {

            return (
              <Tooltip
                key={g.name}
                content={`${g.name} - ${g.kind}`}
              >

                <Switch
                  key={g.name}
                  id={g.name}
                  label={g.name}
                  name={g.name}
                  value={`{"kind":"${g.kind}","channelId":"${g.channelId}","gatewayName":"${g.name}","quote":"true"}`}
                  labelProps={{
                    className: "text-sm font-normal text-blue-gray-500",
                  }}
                  onChange={handleCheckboxChange}
                />
              </Tooltip>
            )

}) : "Loading..."}

我创造了这个国家

  const [checkboxes, setCheckboxes] = useState([]);

我正在try 创建HandleCheckboxChange

 const handleCheckboxChange = (e) => {
    const { name, checked, value } = e.target;

  
    if(checked){
      setCheckboxes(prev => ({ 
        targets: [prev.targets,JSON.parse(value)]
      }))
    }else{
      setCheckboxes(prev => ({ 
        targets: prev.filter(target => target !== JSON.parse(value))
      }))
    }

    console.log(checkboxes)
  };

但当我选中第一个复选框时，数组中有两个元素，第一个元素是未定义的. 当我取消选中时，我收到以下错误

TypeError: prev.filter is not a function个