Necesito establecer el valor predeterminado en la casilla de verificación de la interfaz de usuario de mi material de reacción. Así que hice esta tarea usando el gancho React.useEfect.

Así es como se ve después de establecer el valor usando useEfect.

Pero ahora me enfrento a un problema. Después de desmarcar mi casilla de verificación, no puedo volver a marcar. Y no tengo idea de qué está pasando con mi código. Si alguien me puede ayudar con esto, estoy muy agradecido por eso.

 const [checked, setChecked] = React.useState({}); const variant= useSelector((state) => state.promoCodesReducer.selectedPromo); React.useEffect(()=>{ variant && variant.filter((filterData)=> setChecked((newValues) => ({ ...newValues, [filterData.variantId]:checked }))) },[row,variant])

Mi componente de casilla de verificación:

 function addVariantSection(data) { return ( <Grid key={data._id} container spacing={1}> <Grid item xs={12} style={{ justifyContent: 'space-between', display: 'flex', flexDirection: 'row' }}> <div style={{ margin: 10 }}>{`${data.productName ? data.productName : itemName}-${data.variant1} ${data.variant2}`}</div> <div> <Checkbox // eslint-disable-next-line no-useless-concat id={`${data.variantId ? data.variantId:data._id}-` + `checkData`} color='primary' // checked={checked[data._id ? data._id:data.variantId]} checked={checked[data.variantId ? data.variantId:data._id]} onChange={handleChecked(data.variantId ? data.variantId:data._id,data.productId)} style={{ margin: 10 }} /> </div> </Grid> </Grid> ); }

Método para el valor de la casilla de verificación:

 const handleChecked = (id,pid) => (e) => { const { checkedID } = e.target; const vID = e.currentTarget.id.split('-', 1); setChecked((values) => ({ ...values, [id]: checkedID })); };