Question

我是React Hooks的新手，我需要一些有关以下问题的指导。

我正在异步提交表单。我确实使用了可以为此取消的Promise。

现在，想像发生什么事，直到承诺解决并且组件被卸载。诺言解决后，我得到一个错误：

无法在已卸载的组件上执行React状态更新。这是空操作，但表明您的应用程序中发生内存泄漏。

基本上，如果卸载组件，则必须取消Promise。 $products = [[12,11,10], [16,15,14], [600,103,20]]; echo implode('<br />', array_map(function ($arr) { return implode(' ', $arr); }, $products));的返回函数正是我所需要的，但是问题是我无法在useEffect函数中启动Promise请求，因为必须在按下Submit按钮时执行请求，而不是在按下按钮时执行该组件已安装或更新。

在卸载组件时如何取消Promise？

注意：我正在寻找一个不涉及根据[react doc] [react doc]被声明为反模式的useEffect的解决方案：{{ 3}}

最小代码示例：

isMounted

我已经尝试了以下解决方案，但奇怪的是它不起作用。

const AccountDetails = ({ props }) => {

/* functions and variable declarations go here */
const [accountDetails, setAccountDetails] = useState({}); //initialize state variables 

const handleSubmit = () => {
  const data = { /* computed data */ }; 
  dataService.get(
    submitUrl,
    data, 
  ).then(
    result => {
     setAccountDetails(result); //here is where the error is thrown when the component is unmounted
    }
  );  
};

return (
  <div>
   <!-- form fields --> 
   <button onClick={handleSubmit} .../>

  </div>
);

};

我可以将React useEffect用于异步POST提交请求吗？

0 个答案: