反应18严格的模式，导致组件渲染两次

Question

React版本18 中严格模式的更改导致我的代码渲染两次，这会导致 Axios 中止控制器的错误，但我不知道如何清除错误在应用程序呈现两次之后的浏览器控制台。

请注意：我正在研究注册 /登录应用程序，即使我成功登录后， react < / strong>将我带回登录页面，因为 axios < /strong>错误

useEffect(() => {
    let isMounted = true;
    // used by axios to cancel request
    const controller = new AbortController();

    const getGoals = async () => {
        try {
            const response = await goalPrivate.get("/goals", {
                // option to cancel request
                signal: controller.signal
            })
            console.log(response?.data);
            // set goals state when component mounts
            isMounted && setGoals(response?.data);
        } catch (error) {
            console.log(error.message);
            // when refreshToken expires
            navigate("/login", { state: { from: location }, replace: true });
        }
    }

    getGoals();

    // cleanup function
    return () => {
        // don't set state if component unmounts
        isMounted = false;
        // cancel request if component unmounts
        controller.abort();
    }
    
    // eslint-disable-next-line react-hooks/exhaustive-deps
}, [])

Answer 1

React strictMode调用所有效果的所有效果两次，以确保其清理/卸载处理程序按预期工作。即使他们有空的依赖列表，并且通常不会在网站关闭之前卸载，您可能需要相应地更改效果。

请注意，这仅发生在严格 +开发模式下。在生产构建中，效果只会在其依赖性变化时一次调用。

前上下文，请参见 https：//reactjs.s.s.org/strict-ocs/strict-coms/strict-com- mode.html＃确保可调用状态

Answer 2

有相同的问题并以这种方式修复。

当中止流行程序中流产时，您会跳到捕获量，因此您只需检查信号是否流产或不执行代码的其余部分即可。

useEffect(() => {
    const abortController = new AbortController();

    fetch("https://pokeapi.co/api/v2/pokemon", {
      signal: abortController.signal,
    })
      .then((res) => res.json())
      .then(console.log)
      .catch((err) => {
        if (abortController.signal.aborted) return;
        console.log(err);
        // Your navigate
      });

    return () => {
      abortController.abort();
    };
  }, []);

Answer 3

React 18现在具有 strict.mode ，可以安装，卸载和重新安装组件，这会导致 abortController 在第一个删除上发出错误。请记住，只有在index.js中应用strict.mode时，才会在开发模式下发生。在开发模式中，我们可以检查该行为。

try {
     // fetch API data
  } catch (error) {
       if (process.env.NODE_ENV === "development" && error) {
         // ignore the error
        console.log(error.message);
   } else {
     // when refreshToken expires, go back to login
    navigate("/login", { state: { from: location }, replace: true });
  }
}

Answer 4

如果您启用了严格模式，它将在开发模式上发射两倍的使用效果，以确保您知道可能出现的副作用。

Answer 5

您应该对错误响应进行分类，取决于错误代码或HTTP状态代码。

例如：

...
try {
    // Create axios request
} catch (e: AxiosError) {
    if (error.code === 'ERR_CANCELED') {
        // When abort controller executed
    } else (error.response.status == 401) {
        // When you get http code 401 (Un-authenticated)
        // Eg:
        navigate("/login", { state: { from: location }, replace: true });
    } else {
        // Etc...
    }
}
...

Answer 6

在搜索此问题时，我发现要克服此问题的最佳选择是：

1. 从应用程序中删除严格模式（您可以通过从应用程序组件中删除stricmode标签来执行此操作）
2. 使用React Query（您应该在现代React中使用该Quey Query无论如何）

参考：

https://blog.bitsrc.io/react-v18-0-useeffect-bug-why-do-effects-跑步twice-39babecede93