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 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，它实现为反应挂钩，具有手动中止和卸载时自动中止的作用。

用钩子进行React Cleanup异步函数获取

1 个答案: