為什么當 onChange 處理程序設置 state 時反應輸入復選框不檢查？

Question

我有一個帶有一些復選框的 React 應用程序，當 onChange 處理程序 function 設置 state 時，這些復選框不再檢查。 但是，當我沒有設置沒有 arrays 的 state 例如 setState("it works") 時，復選框確實有效。 但是，當我使用 arrays 例如 setState([...array, value]) 設置 state 並且保持未選中狀態時，它們不起作用。 當我單擊復選框/觸發 onChange 處理程序 function 時，e.target.checked 的 console.log 保持為真並且在視覺上未選中。 當我根本不 setState 時，該復選框有效。 以下是我的代碼片段，我想我不明白為什么會這樣。

export default function ReserveModal({ className, openModal }) {      
      const [roomsData, setRoomsData] = useState([]);
      const [selectedRooms, setSelectedRooms] = useState([]);}

      const handleSelect = (e) => {
        const checked = e.target.checked;
        const value = e.target.value;
        setSelectedRooms(
          checked
            ? [...selectedRooms, value]
            : selectedRooms.filter((item) => item !== value)
       );
      };
    
      return (
       <div className={styles.roomNumbers}>
          {roomsData.map((roomNumber) => {
            return (
              <div key={uuidv4()} className={styles.rooms}>
                <label htmlFor="roomNumber">{roomNumber.number}</label>
                <input value={roomNumber.number} name="roomNumber" id="roomNumber" type="checkbox" onClick={handleSelect} />
              </div>
            );
          })}
       </div>
);
}

Answer 1

您實際上並沒有設置輸入的checked屬性。 我認為這樣的事情應該有效：

export default function ReserveModal({ className, openModal }) {      
      const [roomsData, setRoomsData] = useState([]);
      const [selectedRooms, setSelectedRooms] = useState([]);}

      const handleSelect = (e) => {
        const checked = e.target.checked;
        const value = e.target.value;
        setSelectedRooms(
          checked
            ? [...selectedRooms, value]
            : selectedRooms.filter((item) => item !== value)
       );
      };
    
      return (
       <div className={styles.roomNumbers}>
          {roomsData.map((roomNumber) => {
            return (
              <div key={uuidv4()} className={styles.rooms}>
                <label htmlFor="roomNumber">{roomNumber.number}</label>
                <input checked={selectedRooms.includes(roomNumber.number)} value={roomNumber.number} name="roomNumber" id="roomNumber" type="checkbox" onClick={handleSelect} />
              </div>
            );
          })}
       </div>
);
}