Warum bricht das Klicken auf ein Kontrollkästchen die vorherige Auswahl in React ab?

Question

Ich habe mehrere Kontrollkästchen und wenn ich auf ein Kontrollkästchen und dann auf das nächste klicke, wird das vorherige Kontrollkästchen deaktiviert. Wissen Sie, warum?

Dies ist meine Checkbox-Komponente:

const Checkbox = ({ key, id, label, selected, name, onChange }:any) =>

  zurückkehren (
    <div className="checkbox-wrapper">
      <input multiple key={id} id={id} type="checkbox" reviewed={checked} name={name} onChange={onChange} />
      <label htmlFor={id}>{label}</label>
    </div>
  )
}

So sieht die Hauptkomponente aus, die Daten sind in einem Array vorhanden und werden dann zugeordnet, aber ich bin mir nicht sicher, warum das vorherige Kontrollkästchen deaktiviert wird. Ich habe viele andere nutzlose JSX-Codes entfernt: < /p>

const checkboxList = [

  {
    id:0,
    label:"Großbuchstaben",
    Name: „oben“,
    geprüft:falsch

  },
  {
    ID:1,
    label:"Kleinbuchstaben",
    Name: „unten“,
    geprüft:falsch

  },
  {
    ID:2,
    label:"Nummer",
    Name: „Nummer“,
    geprüft:falsch

  },
  {
    id:3,
    label:"symbol",
    Name: „Symbole“,
    geprüft:falsch

  }
]

const PasswordGenerator = () =>


const [data, setData] = useState(checkboxList)

 
  const handleChange = (id:number) =>
    const updateCheckboxes = checkboxList.map((checkbox) =>
    checkbox.id === id ? {...checkbox, geprüft: !checkbox.checked}:checkbox)

    setData(updateCheckboxes)

  }


  zurückkehren (
    
      <div className="elements">
        {data.map((obj) => {

          zurückkehren(
            <div key={obj.id}>
          <Kontrollkästchen
          multiple={true}
          id={obj.id}
          label = {obj.label}
          geprüft= {obj.checked}
          name= {obj.name}
          onChange = {() => handleChange(obj.id)}
          />
        </div>

          )
        })}
        </div>
  )
}

Answer 1

当你更新状态时，你是从原始数组而不是当前状态进行更新的。而不是从原始数组（checkboxList）进行映射，而是从状态的当前值（data）进行映射：

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

  setData(updateCheckboxes)
}