Javascript 在第一次单击toggle之后禁用图像元素，然后使用react hooks中的setTimeout重新启用它

我正在构建一个停车位功能，以便使用

预订时间

为用户分配停车位。我试图实现的是，当用户

第一次单击图像元素时，图像
切换到第二个图像，然后
禁用切换功能一段时间（保留时间），在保留时间到期之前，用户不能再次单击图像元素。设置的超时稍后将模拟
onClick
和
toggle
将图像切换回其初始状态。到目前为止，我在toggleActive（）中使用了
设置超时
，但是切换状态并没有按照预期进行切换，这取决于
设置超时
功能。以下是我迄今为止所做工作的代码：

// === toggleActive() === toggles the active image by id, selected by the user
  function toggleActive(index) {
    let arrayCopy = [...slotState.slots];

    const countDownDate = new Date("September 4, 2020 00:00:00").getTime();

    
      const now = new Date().getTime();

      // duration === (Reservation time) === to reserve a parking slot
      const reservationTime = countDownDate - now;


    // if arrayCopy[index].toggled equals to true then toggled is *false* else toggled is *true*
    arrayCopy[index].toggled
      ? setTimeout(()=>{
        return(arrayCopy[index].toggled = false)},reservationTime)
      : (arrayCopy[index].toggled = true);
    changeState({ ...slotState, slots: arrayCopy });
  }


function toggleActiveImage(index) {
    if (slotState.slots[index].toggled) {
      // === parkingImages.unavailable === is a red image(Indicating the slot is assigned)
      return parkingImages.unavailable;
    } else {
      // === parkingImages.unavailable === is a blue image(Indicating the slot is not assigned)

      return parkingImages.available;
    }
  }


const renderSlots = slotState.slots.map((slot, index) => {
    return (
      <div className="col-md-1" style={{ width: "auto" }} key={index}>
        <img
          key={index}
          src={toggleActiveImage(index)}
          style={{ width: "3rem", cursor: "pointer" }}
          alt="parking"
          onClick={() => toggleActive(index)}
        />
        <p style={{ fontSize: ".8rem", fontWeight: "500" }}>
          slot-{slot.slot_no}
        </p>
      </div>
    );
  });

//==toggleActive（）==根据用户选择的id切换活动图像
函数toggleActive（索引）{
让arrayCopy=[…slotState.slots]；
const countDownDate=新日期（“2020年9月4日00:00:00”）.getTime（）；
const now=new Date（）.getTime（）；
//持续时间==（预约时间）==预约停车位
const reservationTime=倒计时日期-现在；
//如果arrayCopy[index].toggled等于true，则toggled为*false*否则toggled为*true*
arrayCopy[索引]。已切换
？设置超时（（）=>{
return（arrayCopy[index].toggled=false）}，reservationTime）
：（arrayCopy[index].toggled=true）；
changeState（{…插槽状态，插槽：arrayCopy}）；
}
函数toggleActiveImage（索引）{
if（slotState.slots[index].切换）{
//===parkingImages.unavailable==为红色图像（表示已分配插槽）
返回parkingImages.unavailable；
}否则{
//===parkingImages.unavailable==为蓝色图像（表示未分配插槽）
返回parkingImages.available；
}
}
const renderslot=slotState.slots.map（（slot，index）=>{
返回(
toggleActive（索引）}
/>

插槽-{slot.slot_no}

);
});

我真的希望能找到解决上述问题的方法，提前谢谢你。
我就是这样做的

const reservationTime = 3000;
const Slots = (props) => {
  const [slots, setSlots] = React.useState(props.slots);

  const disableSlot = (selectedIndex) => {
    // Check if slot is active at the time of clicking.
    if (slots[selectedIndex].active === true) {
      const updatedSlots = slots.map((slot, index) => {
        if (selectedIndex === index) {
          slot.active = false;
        }
        return slot;
      });
      setSlots(updatedSlots);
      setTimeout(() => {
        activateSlot(selectedIndex);
      }, reservationTime);
    }
  };

  const activateSlot = (selectedIndex) => {
    const updatedSlots = slots.map((slot, index) => {
      if (selectedIndex === index) {
        slot.active = true;
      }
      return slot;
    });
    setSlots(updatedSlots);
  };

  return (
    <ul>
      {slots.map((slot, index) => {
        return (
          <li key={slot.id} onClick={() => disableSlot(index)}>
            {slot.name} - Active: {String(slot.active)}
          </li>
        );
      })}
    </ul>
  );
};

const reservationTime=3000；
常量插槽=（道具）=>{
const[slots，setslot]=React.useState（props.slots）；
const disableSlot=（selectedIndex）=>{
//检查插槽在单击时是否处于活动状态。
如果（插槽[selectedIndex].active==true）{
const updatedSlots=slots.map（（slot，index）=>{
if（selectedIndex==索引）{
slot.active=false；
}
返回槽；
});
设置槽（更新槽）；
设置超时（（）=>{
激活批次（选择索引）；
}，预订时间）；
}
};
const activateSlot=（selectedIndex）=>{
const updatedSlots=slots.map（（slot，index）=>{
if（selectedIndex==索引）{
slot.active=true；
}
返回槽；
});
设置槽（更新槽）；
};
返回(

{slots.map（（slot，index）=>{
返回(
disableSlot（index）}>
{slot.name}-Active:{String（slot.Active）}

);
})}

);
};