我有这样的数据：

const [purchaseTypes, setPurchaseTypes] = useState([]);
const purchaseInitData = [
    { id: 1, name: 'liveType', purchaseType: 'liveType', label: 'purchase live training' },
    { id: 2, name: 'courseType', purchaseType: 'courseType', label: 'purchase course videos'}];

输入复选框：

{purchaseData.map((item, index) => {
    return (
        <div className="flex items-center mb-2" key={index}>
            <input type="checkbox" id={item.id} name={item.name} onChange={(e) => handleOnChange(e, index)} />
            <label htmlFor={`custom-checkbox-${index}`} style={{ marginLeft: '15px' }}>{item.label}</label>
        </div>
    )
})}
const handleOnChange = (e, i) => {
    const newData = [...purchaseData];
    const { checked } = e.target;
    if (checked) {
        setPurchaseTypes((prev) => [...prev, newData[i]]);
    } else {
        setPurchaseTypes(newData.splice(i, 1));
    }
}

我可以将数据设置为状态，但在取消选中时无法删除最后一个状态