我试图显示一些卡的基础上，我从一个API的用户数据。但这个错误一直显示：`警告：React检测到PlanCard调用的Hooks顺序发生了变化。如果不修复，这将导致bug和错误。有关更多信息，请阅读挂钩规则

上一次渲染下一次渲染

1. useState
2. useState
3. useState
4. useEffect使用效果
   1.未定义的useContext
   ^^^^^^^
   这是我所有的计划卡文件

const [loading, setLoading] = useState(false),
    [showAlert, setShowAlert] = useState(false);

  let headless = typeof window !== 'undefined' &&
    window.location.search.includes('?headless'),
    platform =
      typeof window !== 'undefined' &&
        window.location.search.includes('platform=')
        ? new URL(window.location.href).searchParams.get('platform')
        : false,
    access_token =
      typeof window !== 'undefined' &&
        window.location.search.includes('access_token=')
        ? new URL(window.location.href).searchParams.get('access_token')
        : false,
    plans = [],
    payment_plan = null,
    plan_id = null,
    modal = null,
    purchased_from = null;

  if (headless && access_token) {
    payment_plan = useFetchData(access_token);
    plan_id = payment_plan.plan_id;
  } else { 
    // ToDo:
  }
  if (typeof plan_id === 'string') {
    plans = getPlanCards(plan_id, payment_plan.current_plan_status.toLowerCase());
    purchased_from = payment_plan.purchased_from;
    modal = getPlanCardsANAAlert(purchased_from);
  }
};

这是我的fetchPlan代码：

import axios from 'axios';

const useFetchData = (access_token) => {
  const [plan, setPlan] = useState({});
  let componentMounted = true;

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await axios.get(
          `${process.env.GATSBY_API_URL}user/plan/current_plan_detail?token=${access_token}`
        );
        if (componentMounted) {
          setPlan(response.data);
        }
      } catch (error) {
        console.error(error);
      }
    };
    fetchData();
    return () => {
      componentMounted = false;
    };
  }, []);

  return plan;
};

export default useFetchData;