React でチェックボックスをクリックすると以前の選択がキャンセルされるのはなぜですか?

Question

複数のチェックボックスがあるのですが、1 つのチェックボックスをクリックしてから次のチェックボックスをクリックすると、前のチェックボックスの選択が解除されます。理由はわかりますか?

これは私のチェックボックスコンポーネントです:

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

  戻る （
    <div className="チェックボックスラッパー">
      <複数入力 key={id} id={id} type="checkbox" selected={checked} name={name} onChange={onChange} />
      <label htmlFor={id}>{label}</label>
    </div>
  )
}

これはメインコンポーネントの外観です。データは配列内にあり、マッピングされていますが、前のチェックボックスの選択が解除される理由がわかりません。他の多くの無駄な JSX コードを削除しました:< ; /p>

const checkboxList = [

  {
    ID:0、
    ラベル:「大文字」、
    名前：「アッパー」、
    チェック済み:偽

  }、
  {
    ID:1、
    ラベル:「小文字」、
    名前：「下」、
    チェック済み:偽

  }、
  {
    ID:2、
    ラベル:「番号」、
    名前: "番号"、
    チェック済み:偽

  }、
  {
    ID:3、
    ラベル:「シンボル」、
    名前: 「シンボル」、
    チェック済み:偽

  }
】

const PasswordGenerator = () => {


const [データ, setData] = useState(checkboxList)

 
  const handleChange = (id:number) => {
    const updateCheckboxes = checkboxList.map((チェックボックス) =>
    checkbox.id === id ? {...チェックボックス、チェック済み: !checkbox.checked}:checkbox)

    setData(updateCheckboxes)

  }


  戻る （
    
      <div className="要素">
        {data.map((obj) => {

          戻る（
            <div key={obj.id}>
          <チェックボックス
          複数={true}
          id={obj.id}
          ラベル = {obj.label}
          チェック済み= {obj.チェック済み}
          名前= {obj.name}
          onChange = {() => handleChange(obj.id)}
          />
        </div>

          )
        })}
        </div>
  )
}

Answer 1

状態を更新すると、現在の状態ではなく、元の配列から更新されます。元の配列 (checkboxList) からマッピングする代わりに、状態の現在の値 (データ) からマッピングします:

リーリー