Reactjs 用户授权后如何在所有子组件之间传递状态？

服务器正在返回用户数据。我尤其对他的权利感兴趣。有了这些权限，我将呈现组件。我正在考虑将这些数据传递给组件并进行一些检查。所有路由都在index.js中

import {Notfound404} from './components/404/404NotFound'
import {UserContext} from './UserContext'

const Router = () => {

    const [user, setUser] = useState(null)

    return (
        <React.StrictMode>
            <UserContext.Provider value={{user, setUser}}>
                <CookiesProvider>
                    <BrowserRouter>
                        <Switch>
                            <Route exact path={'/'} component={Auth}/>
                            <Route exact path={'/settings'} component={Settings}/>
                            <Route exact path={'/event-logs'} component={EventLog}/>
                            <Route component={Notfound404} status={404}/>
                        </Switch>
                    </BrowserRouter>
                </CookiesProvider>
            </UserContext.Provider>
        </React.StrictMode>
    )
}

---

也许我做错了什么，我在请求你的帮助。谢谢。

我想在重定向到设置页面时正在刷新。重新加载会导致上下文值被清除（很简单，因为上下文的值来自某个状态，而该状态由于刷新而丢失）。要解决此问题，您可以将身份验证数据存储在localStorage中，并在其为null时为其分配上下文值。

正如Saba所指出的，问题在于刷新清除上下文的页面。这是通过以下几行完成的：

useEffect(() => {
    if (token['qr-token']) window.location.href = '/settings'
}, [token])

不要在单页应用程序中使用通常的重定向方法。相反，使用

const history = useHistory();
useEffect(() => {
    if (token['qr-token'])
        history.push('/settings');
}, [token])

这不会导致重新加载页面，因此会使您的上下文保持活动状态

useContext（）提供已传递的分派函数 从存储组件。dispatch函数接受两个参数， 一种操作类型，以及用于更新全局状态的有效负载。这个 然后，useContext（）函数将返回更新的全局状态

const{state，dispatch}=useContext（MyContext）；

在代码中，必须使用参数contains action type和payload触发用户设置

比如说

setUser({
类型：“设置用户”，
有效载荷：响应数据
})

你能提供文件的内容吗

UserContext

请？没什么特别的）从'react'导出{createContext}const UserContext=createContext（null）我还以为这是因为window.location，如果用户以某种方式从本地存储中删除数据，只需注销它？我只是不知道什么是最好的选择。我已经做了一个星期的前端）如果本地存储被清除，页面刷新发生，上下文将再次为空。另一种方法如Simon所说，使用history.push（），它不会导致任何刷新。但是，如果发生任何刷新，如果未存储在localStorage中，则上下文将再次变为null。工作正常！非常感谢你。但是如果页面被刷新，数据就会丢失。也许正如Saba所建议的那样，将它们存储在本地存储中？@是的，您需要某种方式来持久化登录令牌<代码>本地存储是当前设置的最佳选择。只要保存qr令牌，并在加载站点时读取它即可。好的！非常感谢。

useEffect(() => {
    if (token['qr-token']) window.location.href = '/settings'
}, [token])

const history = useHistory();
useEffect(() => {
    if (token['qr-token'])
        history.push('/settings');
}, [token])