React Cleanup async function fetch with hooks 回复

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 状态更新。”错误。

那么，使用效果，我如何确保清除此提取调用？我看到的所有示例都使用 useEffect 来设置和清理调用（使用清理功能）。

Answer 1

通过使用 abort controller

取消卸载来清理获取请求

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

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 async function fetch with hooks 回复

React Cleanup async function fetch with hooks

javascript

reactjs

react-effects