Pourquoi cliquer sur une case à cocher annule-t-il la sélection précédente dans React ?

Question

J'ai plusieurs cases à cocher et lorsque je clique sur une case puis sur la suivante, la case précédente est décochée, savez-vous pourquoi ?

Voici mon composant de case à cocher :

const Checkbox = ({ clé, identifiant, étiquette, vérifié, nom, onChange }:any) =>

  retour (
    

      
      {label}
    
  )
}
Voici à quoi ressemble le composant principal, les données sont présentes dans un tableau puis mappées, mais je ne sais pas pourquoi il décoche la case précédente, j'ai supprimé beaucoup d'autres codes JSX inutiles : ≪ /p>
const checkboxList = [

  {
    identifiant:0,
    étiquette : "majuscule",
    nom : "supérieur",
    vérifié : faux

  },
  {
    identifiant : 1,
    étiquette : "minuscule",
    nom : "inférieur",
    vérifié : faux

  },
  {
    identifiant : 2,
    étiquette : "numéro",
    nom : "numéro",
    vérifié : faux

  },
  {
    identifiant : 3,
    étiquette : "symbole",
    nom : "symboles",
    vérifié : faux

  }
]

const Générateur de mots de passe = () =>


const [données, setData] = useState (checkboxList)

 
  const handleChange = (id:numéro) =>
    const updateCheckboxes = checkboxList.map((checkbox) =>
    checkbox.id === id ? {...case à cocher, cochée : !checkbox.checked}:case à cocher)

    setData (mise à jour des cases à cocher)

  }


  retour (
    
      

        {data.map((obj) => {

          retour(
            
           handleChange(obj.id)}
          />
        

          )
        })}
        

Answer 1

Lorsque vous mettez à jour l'état, vous effectuez la mise à jour à partir du tableau d'origine, et non à partir de l'état actuel. Au lieu de mapper à partir du tableau d'origine (checkboxList), mappez à partir de la valeur actuelle de l'état (données) :

const handleChange = (id:number) => {
  const updateCheckboxes = data.map((checkbox) => 
    checkbox.id === id ? {...checkbox, checked: !checkbox.checked}:checkbox)

  setData(updateCheckboxes)
}