0

我正在使用 RecoilJS 在 Next 的两个页面之间传递全局状态。这工作正常，直到我在接收变量的页面中使用 next-i18next 。如果我在接收页面的 getServerSideProps 中注释掉 next-i18next 代码，则 Recoil 原子会正确传递。

export const getServerSideProps = withAuthUserSSR({ 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' 没有通过，这有什么不寻常的地方。这用于存储文件输入字段的值，并且当取消注释下一个 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，结果相同

4

1 回答 1

0

我刚刚找到了答案，但不确定发布我自己问题的答案的礼仪，所以在这里查找，这似乎是最好的方法。

它似乎与此处详述的错误有关，其中“在带有或不带有翻译的页面之间导航会导致 _app 重新安装”。通过在发送全局变量的第一页上包含“serverSideTranslations”，它会停止重新安装应用程序，这会导致数据丢失。

于 2021-12-13T09:38:40.807 回答