何时/何地引入全局设置

Question

我的应用程序有许多设置，这些设置在我的大多数不同页面中使用，我目前每次都在每个不同页面中加载这些设置。由于这些都是全局设置，我希望在登录时一次将它们全部拉入，将它们放在react上下文中，然后根据不同组件的需要从上下文中获取它们。

我已经做了一些快速测试，但遇到了各种问题，比如我的上下文试图在登录完成之前拉入设置(由于没有令牌而失败(。我把设置调用放在我的仪表板组件中，除了用户可以在仪表板上导航并错过设置调用之外，它还能工作。

我觉得一定有一个简单的推荐模式，我没有考虑。让我知道你的想法！

Answer 1

发布我当前的"解决方案"，以防有用。我会按照François的建议考虑使用localStorage，但在localStorage出现之前，我就发现了将数据放入React Context的方法。我不太确定为什么我的方法工作得这么好，因为它感觉有点超出了预期的反应管理行为，但它就在这里！

首先，我制作了一个React上下文(PackageFieldsContext(，并封装了我的Admin组件。我放置了一个自定义组件作为Admin子组件之一——这个组件(PackageFieldsDataFetcher(没有内容，没有可访问的路径，也不呈现任何内容。它使用自定义挂钩获取数据，并将数据放入上下文中。

具有提供者和数据提取程序组件的管理员：

<PackageFieldsProvider >
<Admin 
authProvider={authProvider} 
dataProvider={dataProvider} 
dashboard={Dashboard}
layout={MyLayout}
customRoutes={customRoutes}
>
<Resource 
name="Packages" 
list={PackageList}
/>
<PackageFieldsDataFetcher />
</Admin>         
</PackageFieldsProvider>

组件：

const PackageFieldsDataFetcher = () => {
const { setPackageFields } = useContext(PackageFieldsContext); //get useState setter from context
const [ fieldsLoading, returnedFields, ] = useGetPackageFields(); // retrieve data with my custom hook
useEffect(() => {
if(!fieldsLoading) {
setPackageFields(returnedFields);
}
}, [fieldsLoading]); //when fields are loaded, set them in context

return (
<>
</>
);
}

这感觉有点粗糙；我知道，即使我的自定义组件有东西要渲染，Admin组件也不会渲染它，因为它不是资源。但是，Admin似乎仍然让组件中的其他一切正常工作。

这个组件确实在登录前被"挂载"，所以它总是试图在登录前提取数据，所以我在加载页面时总是得到401。我确信我可以使用useAuthenticated或useAuthState钩子来阻止这个401错误，但我们拭目以待。。可能还有一些其他问题，我还没有看到