Next-i18Next 在 NextJS 中阻塞全局状态
Posted
技术标签:
【中文标题】Next-i18Next 在 NextJS 中阻塞全局状态【英文标题】:Next-i18Next Blocking Global State in NextJS 【发布时间】:2022-01-16 18:33:00 【问题描述】:我正在使用 RecoilJS 在 Next 中的两个页面之间传递全局状态。这工作正常,直到我在接收变量的页面中使用 next-i18next 。如果我在接收页面的 getServerSideProps 中注释掉 next-i18next 代码,则 Recoil atom 会正确传递。
export const getServerSideProps = withAuthUsers-s-r( whenUnauthed:
AuthAction.REDIRECT_TO_LOGIN,)(async ( AuthUser, req, locale ) =>
return
props:
// ...(await serverSideTranslations(locale,
// [
// 'sidebar',
// 'search',
// ...
// ]
// )),
,
;
)
但是,我取消注释掉这段代码,一个我的变量被阻塞了。我确实需要使用 next-i18next。谁能解释一下为什么会被屏蔽?
我有三个 Recoil 原子,我正在使用 recoil-persist 在页面之间持久化数据,因为我知道 Recoil 通常不会这样做:
import recoilPersist from 'recoil-persist'
import atom from "recoil";
const persistAtom = recoilPersist( key: 'RSKatom' )
export const newUser = atom(
key: "newUser",
default: false,
effects_UNSTABLE: [persistAtom],
)
export const newUserAvatar = atom(
key: "newUserAvatar",
default: null,
effects_UNSTABLE: [persistAtom],
)
export const newName = atom(
key: "newName",
default: "",
effects_UNSTABLE: [persistAtom],
)
'newUser' 和 'newName' 都通过了,但 'newUserAvatar' 没有通过,这很不寻常。这用于存储文件输入字段的值,当 next-i18next 代码被取消注释时,'newUserAvatar' 总是成为一个空对象,并在控制台记录为 'RECOIL AVATAR: '
将上面的代码注释掉,就可以了,这是console.log:
RECOIL AVATAR: File name: 'sample-avatar.jpeg', lastModified: 1639308280770, lastModifiedDate: Sun Dec 12 2021 19:24:40 GMT+0800 (Central Indonesia Time), webkitRelativePath: '', size: 14744, …
有人可以帮忙吗?
编辑:我认为这不是 Recoil 特有的。我也尝试了 React Context API,结果相同
【问题讨论】:
【参考方案1】:我刚刚找到了答案,但不确定发布我自己问题的答案的礼仪,所以查找了here,这似乎是最好的方法。
它似乎与详细的错误 here 有关,其中“在有或没有翻译的页面之间导航会导致 _app 重新安装”。通过在发送全局变量的第一页上包含“serverSideTranslations”,它会停止应用重新挂载,这会导致数据丢失。
【讨论】:
以上是关于Next-i18Next 在 NextJS 中阻塞全局状态的主要内容,如果未能解决你的问题,请参考以下文章
如何使用 NextJS 和 next-i18next 翻译路线?
当nextjs中的语言改变时,如何用next-i18next改变<Html“lang”/>?