Remix框架React has detected a change问题

李恒道

这种情况是在使用了useContext等函数，下次提前返回导致hook的链条出现错误
首先排查各函数是否存在提前return等问题
然后排查是否存在框架与实现影响
在本次最后定位到了meta函数的t导致

export const meta: V2_MetaFunction = ({ data }) => {
  const {t}=useTransition()
  return [{ title: t('ScriptCat') }];
};

其中const {t}=useTransition()调用了useTransition
而useTransition调用了useContext
由于其框架会循环遍历meta
一旦路由发生改变就会导致hook链的不正确
解决方案就是在loader调用

 const t = await i18next.getFixedT(request);

然后返回给meta函数进行直接使用