확인란을 클릭하면 React에서 이전 선택이 취소되는 이유는 무엇입니까?

Question

체크박스가 여러 개 있는데 하나의 체크박스를 클릭하고 다음 체크박스를 클릭하면 이전 체크박스의 선택이 취소됩니다. 이유를 아시나요?

이것은 내 체크박스 구성요소입니다:

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

  반품 (
    <div className="checkbox-wrapper">
      <다중 키 입력={id} id={id} type="checkbox" selected={checked} name={name} onChange={onChange} />
      <label htmlFor={id}>{label}</label>
    </div>
  )
}

이것은 주요 구성 요소의 모습입니다. 데이터는 배열에 존재하고 매핑되지만 이전 확인란을 선택 취소하는 이유는 확실하지 않습니다. 다른 쓸모 없는 JSX 코드를 많이 제거했습니다. <

const checkboxList = [

  {
    아이디:0,
    label:"대문자",
    이름: "상단",
    확인됨:거짓

  },
  {
    아이디:1,
    label:"소문자",
    이름: "낮음",
    확인됨:거짓

  },
  {
    아이디:2,
    label:"번호",
    이름: "번호",
    확인됨:거짓

  },
  {
    아이디:3,
    라벨:"기호",
    이름: "기호",
    확인됨:거짓

  }
]

const PasswordGenerator = () =>


const [data, setData] = useState(checkboxList)

 
  const handlerChange = (id:번호) =>
    const updateCheckboxes = checkboxList.map((checkbox) =>
    checkbox.id === id ? {...체크박스, 선택됨: !checkbox.checked}:체크박스)

    setData(updateCheckboxes)

  }


  반품 (
    
      <div className="요소">
        {data.map((obj) => {

          반품(
            <div key={obj.id}>
          <체크박스
          다중={true}
          id={obj.id}
          라벨 = {obj.label}
          확인됨= {obj.checked}
          이름= {obj.name}
          onChange = {() =>handleChange(obj.id)}
          />
        </div>

          )
        })}
        </div>
  )
}

Answer 1

상태를 업데이트하면 현재 상태가 아닌 원래 배열에서 업데이트됩니다. 원래 배열(checkboxList)에서 매핑하는 대신 상태(데이터)의 현재 값에서 매핑합니다.

으아악