当角度发生错误时，createEffect导致持续加载

基础概念

createEffect 是 React 中的一个 Hook，用于在组件挂载时执行副作用操作，比如数据获取、订阅或手动更改 DOM 等。它返回一个函数，用于清除副作用。

类型

createEffect 主要有两种类型：

Mount Effect：在组件挂载时执行，卸载时清除。
Update Effect：在组件更新时执行，依赖变化时重新执行。

应用场景

数据获取
订阅外部数据源
手动更改 DOM

问题分析

当角度发生错误时，createEffect 导致持续加载，通常是因为依赖数组设置不当或副作用函数内部逻辑错误。

原因

依赖数组设置不当：如果依赖数组为空或不正确，副作用函数会在每次组件渲染时都执行，导致持续加载。
副作用函数内部逻辑错误：副作用函数内部可能存在无限循环或其他逻辑错误，导致持续加载。

解决方法

正确设置依赖数组：确保依赖数组包含所有需要监听的状态或 props。
检查副作用函数逻辑：确保副作用函数内部逻辑正确，避免无限循环或其他错误。

示例代码

import React, { createEffect, useState } from 'react';

const MyComponent = () => {
  const [data, setData] = useState(null);

  createEffect(() => {
    let isMounted = true;

    const fetchData = async () => {
      try {
        const response = await fetch('https://api.example.com/data');
        const result = await response.json();
        if (isMounted) {
          setData(result);
        }
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    };

    fetchData();

    return () => {
      isMounted = false;
    };
  }, []); // 确保依赖数组正确

  return (
    <div>
      {data ? <div>{JSON.stringify(data)}</div> : <div>Loading...</div>}
    </div>
  );
};

export default MyComponent;