javascript - 通过数组 reactjs 处理多个循环复选框

Question

我有一个循环遍历数组的复选框，我正在努力存储数据。所以这是我存储选中的复选框的 id 的逻辑

const [selectCbId, setSelectCbId] = useState<any>([]);
const [selectCbPrice, setSelectCbPrice] = useState<any>([0]);
const [selectCbName, setSelectCbName] = useState<any>([]);

const [groupValueIdCb, setGroupValueIdCb] =  useState<{ [id: string]: string }>({});
const [groupValuePriceCb, setGroupValuePriceCb] =  useState<{ [id: string]: any }>({});
const [groupValueNameCb, setGroupValueNameCb] =  useState<{ [id: string]: string }>({});


const handleSelectVariantCheckBox = (
  variantItemId: any,
  variantItemPrice: any,
  variantItemName: any,
  varianId: any,
  itemList: any
) => {

const newIds = selectCbId?.includes(variantItemId)
  ? selectCbId?.filter((id: any) => id !== variantItemId)
  : [...(selectCbId ?? []), variantItemId];
setSelectCbId(newIds);

const newPrice = selectCbId?.includes(variantItemId)
  ? selectCbPrice?.filter((price: any) => price !== variantItemPrice)
  : [...(selectCbPrice ?? []), variantItemPrice];
setSelectCbPrice(newPrice);

const newName = selectCbName?.includes(variantItemName)
  ? selectCbName?.filter((name: any) => name !== variantItemName)
  : [...(selectCbName ?? []), variantItemName];
setSelectCbName(newName);

setGroupValueIdCb(curr => ({...curr, [varianId]: newIds}))
setGroupValuePriceCb(curr => ({...curr, [varianId]: itemList?.find((item) => item.product_variant_item_id === variantItemId).product_variant_item_price}))
setGroupValueNameCb(curr => ({...curr, [varianId]: newName}))

return { newIds, newPrice, newName };
};

但我得到的是这样的，当我“检查”第一个复选框的数据时，它也会存储前一个复选框的 ID。

我期望的是它不返回以前的数据，所以每个对象数组都有自己的数据而不需要其他数据，这是我这个问题代码框的源代码，提前谢谢你。

标签： javascriptarraysreactjs