反应如何在使用效果后重置状态

Question

我有一个带有按钮 A 的页面。单击时，它会进行 API 调用，如果成功，则会打开一个新页面。在进行 API 调用时，会出现一个模式，通知用户请求正在进行中。

该模式包含一个取消按钮。如果单击，新页面不应打开，并且状态应重置，以便用户可以在需要时再次取消。

我使用 useEffect 挂钩来检测是否单击了取消按钮。如果是，则新页面将无法打开。对于 api 调用，我使用了 wait 而不是 settimeout(..)

无论新页面打开与否，我都需要重置 useEffect 中的变量。我还没有找到处理 JavaScript 异步特性的解决方案。必须确保每次单击取消按钮时，用户都可以单击按钮 A 并重复取消操作。

import React, {  useState, useRef, useEffect  } from 'react';

export default function NewApp(props) {
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [apiRequestSuccessful, setApiRequestSuccessful] = useState(false);
  const [isCancelClicked, setIsCancelClicked] = useState(false);


  const handleButtonClick = async () => {
    // Open the modal
    setIsModalOpen(true);
    setIsCancelClicked(false);

    try {
      // Make the API request
      setTimeout(()=>{
        console.log("making api call")
      },3000)
        setApiRequestSuccessful(true);
    } catch (error) {
      console.error('API request failed', error);
    }
  };

  const handleCancelClick = () => {
    setIsCancelClicked(true);
    setIsModalOpen(false);
  };

  useEffect(() => {
    // Check if the API request was successful and the cancel button wasn't clicked
    if (apiRequestSuccessful && !isCancelClicked) {
     window.open('https://example.com', '_blank');
    // console.log("open new window")
    }
    setIsModalOpen(false)
  }, [apiRequestSuccessful, isCancelClicked]);

  return (
    <div>
      <button onClick={handleButtonClick}>Button A</button>
      {isModalOpen && (
        <Modal onCancel={handleCancelClick} />
      )}
    </div>
  );
};

const Modal = ({ onCancel }) => {
  return (
    <div className="modal">
      <p>Api call is being made...</p>
      <button onClick={onCancel}>Cancel</button>
    </div>
  );
};

Answer 1

为什么不将获取对象存储在状态中，一旦单击

cancel

按钮就可以取消获取请求？在

effect

中，您可以监视获取的状态，如果取消获取，它将不会打开新页面，但如果成功，它将关闭模式并显示新页面。这样，就无需禁用

cancel

按钮；所有状态都将连接到您的

API request

状态。 但如果你坚持使用状态，你能解释一下什么时候需要重新设置状态以及什么状态需要休息吗？