Gatsby - wrapPageElement中的布局不更新状态

Question

我的盖茨比4项目中wrapPageElement出现了问题。

wrapPageElement.js

import React from 'react';
import { PathProvider } from './src/providers/path';
import Layout from './src/components/layout/layout';
// Pass all props (hence the ...props)
// to the layout component so it has access to things like pageContext or location
const wrapPageElement = ({ element, props: { location } }) => (
<PathProvider path={location.pathname}>
<Layout>{element}</Layout>
</PathProvider>
);
export default wrapPageElement;

我使用wrapPageElement在所有页面上重用我的布局，但布局没有通过wrapPageElement包含时正确更新其React状态。如果我在我的页面中呈现布局，它会工作得很好。

gatsby-brower.js

import './src/styles/global.css';
import CustomProviders from './wrapWithProvider';
import CustomLayout from './wrapPageElement';
export const wrapPageElement = CustomLayout;
export const wrapRootElement = CustomProviders;

一个视图组件在我的导航栏在布局我调用:

const { language, defaultLanguage } = useI18next();
console.log('locale', language);

当我使用I18next更改页面语言时，"locale"不改变值。"locale"但是，如果我在页面中呈现布局，则会将其值更改为更新后的语言。

我应该注意的是，除了盖茨比生命周期文件，我在所有的项目中都使用TypeScript，比如wrapPageElement.js

任何帮助都是感激的!不确定根本原因在哪里?

---

额外的代码<<p>布局组件/strong>

return (
<div className="page">
<Helmet>
<meta httpEquiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=0" />
<meta name="description" content={props.description || description} />
<meta name="image" content={props.imagePath || image} />
<title>{props.title || title}</title>
{props.noIndex && <meta name="robots" content="noindex" />}
</Helmet>
<Navbar />
<main className="m-10 mt-60">{children}</main>
<Footer />
</div>
);
};

<<p>导航组件/strong>

return (
<nav className="bg-green-300 w-full fixed top-0">
<ul className="flex flex-row gap-5 m-10">
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li className="ml-auto">
<ChangeLanguageLink language="en">EN</ChangeLanguageLink>
</li>
<li>
<ChangeLanguageLink language="th">TH</ChangeLanguageLink>
</li>
</ul>
</nav>
);

ChangeLanguageLink组件

const ChangeLanguageLink: React.FC<React.PropsWithChildren<ChangeLanguageLinkProps>> = ({ children, ...props }) => {
const { originalPath } = useI18next();
return (
<LocalizedLink {...props} to={addFinalSlash(originalPath)}>
{children}
</LocalizedLink>
);
};

Answer 1

我提取的是，您正在尝试使用I18next来更新状态，但您可能不需要包装整个应用程序来实现这一点。const { language, defaultLanguage } = useI18next();将为您提供当前语言。

也就是说，如果你一直想要你的方法，wrapPageElement和wrapRootElement是在Gatsby SSR和Gatsby Browser之间共享的包装器(因此得名)，所以在gatsby-ssr.js中你需要添加确切的信息:

import CustomProviders from './wrapWithProvider';
import CustomLayout from './wrapPageElement';
export const wrapPageElement = CustomLayout;
export const wrapRootElement = CustomProviders;

请记住，wrapRootElement是一个永远不会在整个应用程序中卸载的包装器。