javascript - 带钩子的 React Cleanup 异步函数获取

Question

这是在一个功能组件中。

我有一个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都用于设置然后清理调用（使用清理功能）。

Answer 1

通过使用中止控制器取消卸载来清理获取请求

将处理程序中的获取请求逻辑分解到效果挂钩中，并使用状态挂钩来触发效果触发。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
};

这是一个代码框，它作为一个反应钩子实现，在卸载时手动中止和自动中止。