清理 function 第一次使用 AbortController 失败

Question

我使用AbortController在卸载 React 生命周期中取消fetch promise。 出于某种原因，清理在元素 unmounts 的第一次时不起作用。

  useEffect(() => {
    const controller = new AbortController();
    const signal = controller.signal;
    fetch(`https://pokeapi.co/api/v2/pokemon/${name}`, { signal })
      .then(sleeper(1)) // Create some latency
      .then(res => res.json())
      .then(response => {
        setData(response);
      })
      .catch(error => {
        setData(error);
      });
    return () => {
      controller.abort();
    };
  }, [name]);

演示

请按照以下步骤操作：

1. 访问演示链接。
2. 快速单击Show/hide pokemon按钮 TWICE 以强制中止子Pokemon反应元素。
3. 检查控制台中的错误： Can't perform a React state update on an unmounted component
4. 重复步骤 2。快速单击Show/hide pokemon按钮 TWICE 以强制中止子Pokemon反应元素。
5. 这次没有发现错误，随后重试。 为什么？

Answer 1

中止控制器

注意：当abort()被调用时， fetch() promise 会拒绝一个名为AbortError的DOMException 。

当组件卸载并调用abort时， fetch会因错误而拒绝。 错误被捕获，并且此代码正在尝试使用错误设置 state。 省略此错误 state 更新会删除反应错误。

useEffect(() => {
  const controller = new AbortController();
  const signal = controller.signal;
  fetch(`https://pokeapi.co/api/v2/pokemon/${name}`, { signal })
    .then(sleeper(1)) // Create some latency
    .then(res => res.json())
    .then(response => {
      setData(response);
    })
    .catch(error => {
      setData(error); // <-- this is being called after component unmounts!
    });
  return () => {
    controller.abort();
  };
}, [name]);

我也愿意打赌每次都会发生错误，但反应只是输出第一个错误并让 output 静音以处理后续错误。