javascript - 如何在React Hook 中产生条件

我试图在页面加载时加载引导模式，除非按下取消按钮。该功能的工作方式是，一旦页面加载，等待2秒钟并显示模式，除非按下了取消按钮，否则该模式将不会显示，但是无论是否按下了取消按钮，模式都会显示，

const Call = ({ t, i18n }) => {
  const [modalShow, setModalShow] = useState(false);
  const [cancelCall, setCancelCall] = useState(false);

  useEffect(() => {
     if (cancelCall) {
       return;
     } else {
       setTimeout(() => {
         setModalShow(true);
       }, 2000);
     }
  }, [setModalShow, cancelCall]);

  const handleCancelCall = e => {
    setCancelCall(true);
    console.log("cancel call pressed!");
  };

return (
    <Fragment>
      <CallModal show={modalShow} onHide={() => setModalShow(false)} />

    <button
            type="button"
            className="ml-4 btn btn-light"
            onClick={e => handleCancelCall()}
          >
            Cancel
          </button>
      </Fragment>
  );
};

任何帮助，将不胜感激。

最佳答案

尽管@Rajesh的答案有效，但它导致2次不必要的重新渲染（调用setTimer）。我建议您只需使用ref来跟踪计时器

const [modalShow, setModalShow] = useState(false);
const modalTimer = useRef(null);

useEffect(() => {
  // the if (cancelCall) part in here was pointless
  // because initial state is always false
  modalTimer.current = setTimeout(() => setModalShow(true), 2000);
}, []);

const handleCancelCall = e => {
  // on cancel, simply clear the timer
  modalTimer.current && clearTimeout(modalTimer.current);
};

上面的代码还删除了一些多余的代码和状态。

关于javascript - 如何在React Hook 中产生条件，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/58133312/