带钩子的 React Cleanup 异步函数获取答案

【问题标题】：React Cleanup async function fetch with hooks带钩子的 React Cleanup 异步函数获取
【发布时间】：2020-04-22 23:55:03
【问题描述】：

这是在一个功能组件中。

我有一个看起来像这样的submit() 函数：

  async function handleSubmit(event) {
    event.preventDefault();
    try {
      let resp = await fetch("FOOBAR/BAX", {
        method: 'POST',
        body: JSON.stringify({ /*stuff*/})
      });
      if (resp.ok){
        // yadda yadda yadda
        props.history.push("/"); // navigate
      }
    } 
  }

现在，当我导致导航发生时，我得到了可怕的“无法对未安装的组件执行 React 状态更新”。错误。

那么，使用效果，我如何确保清理这个 fetch 调用？我看到的所有示例都使用useEffect 来设置然后清理调用（带有清理功能）。

【问题讨论】：

您的 handleSubmit 函数中似乎没有任何状态变化。我看这里没有什么要清理的。你愿意分享更多代码吗，也许是在 stackblitz 上？
@yonki 谢谢，也许我的假设是错误的。
@yonki 假设我想确保该请求被取消——我将如何使用 useEffect 来做到这一点？
@mtyson 我相信@yonki 会通知您该错误与您共享的代码不匹配。您的 handleSubmit 函数似乎没有更新状态（除非它隐藏在 yadda yadda yadda 位中）。关于使用useEffect 钩子取消获取请求，您可以将abort controller 与获取请求一起使用。如果您需要帮助，请告诉我们。同时，应 yonki 的要求，您能否分享更多组件代码或在 stackblitz 或 codesandbox 中分享指向它的链接？

标签： javascript reactjs react-effects

【解决方案1】：

通过使用abort controller取消卸载来清理获取请求

将处理程序中的获取请求逻辑分解到效果挂钩中，并使用状态挂钩来触发效果触发。在组件卸载时调用的效果挂钩中返回控制器的abort 函数。

const [body, setBody] = useState('');

useEffect(() => {
  const controller = new AbortController();
  const signal = controller.signal;

  if (body) {
    fetch("FOOBAR/BAX", {
      method: 'POST',
      body: JSON.stringify(body),
      signal, // add signal to request
    })
    .then(res => {
      setBody(''); // clear request body value
      if (res.ok) props.history.push('/');
    });
  }

  return controller.abort; // return the abort function to be called when component unmounts
}, [body]);

const handleSubmit = (event) => {
  event.preventDefault();
  setBody({ /*stuff*/ }); // set request body value to trigger effect to fetch
};

这是一个codesandbox，它作为一个反应钩子实现，具有手动中止和卸载时自动中止。

【讨论】：

这真是个了不起的人，你应该写一篇文章。它击中了一切。
@mtyson 谢谢，你说的太好了。我刚刚注意到并修复了我在效果挂钩中的一个错字，但依赖项应该是 body，而不是我最初调用该变量的 request。希望这没有让您失望。