React 检测到 Hook 的顺序发生了变化

Question

我试图根据从API获得的用户数据显示一些卡片。但是这个错误一直显示:`警告:React检测到PlanCard调用的钩子顺序发生了变化。如果不修复，这将导致错误和错误。更多信息，请阅读钩子的规则

>

使用状态使用状态

使用状态使用状态

使用状态使用状态

使用效果使用效果

未定义的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);
  }
}; 

这也是我的提取计划代码:

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;

Answer 1

if 语句中有一个钩子

if (headless && access_token) {
  payment_plan = useFetchData(access_token);
  plan_id = payment_plan.plan_id;
}

这使得组件渲染之间的钩子不稳定，React使用钩子来确定组件的状态，并跟踪组件在数组中定义的钩子，如果它们在渲染之间不同，这意味着它不能正确地比较状态。看看这里。

要解决此问题，您可以使用如下所示的内容：

const payment_plan = useFetchData(access_token);
if(headless && payment_plan) {
...
} else {
...
}