如果值来自组件内的状态，如何设置 createContext 的初始状态？

问题描述

我是 React Context API 的新手，并且已经为我正在开发的应用程序设置了它，其中用户通过 AWS 登录。在我的 App.js 中，当用户登录时，我使用 useState 钩子将 companyName 状态设置为来自其解码令牌的用户公司名称。

在我的上下文文件“GlobalState.js”中，我想将“initialState”设置为此 companyName 变量，以便可以轻松传递到任何组件，因为我将在许多级别上需要它。目前，我只是将 Context 中公司名称的“initialState”设置为空字符串，我想知道如何将此 initialState 设置为我在 App.js 文件中声明的 companyName 状态。

我的 App.js 在这里：

import { useState,useEffect } from 'react';
import { browserRouter as Router,Route } from 'react-router-dom';
import { Container } from 'react-bootstrap';
import DashboardScreen from './screens/DashboardScreen';
import FileUploadScreen from './screens/FileUploadScreen';
import Sidebar from './components/Sidebar/Sidebar';
import CompanyProfileScreen from './screens/CompanyProfileScreen';
import InsightsScreen from './screens/InsightsScreen';
import WelcomeScreen from './screens/WelcomeScreen';
import Header from './components/Header';
import Amplify,{ Auth } from 'aws-amplify';
import awsconfig from './aws-exports';

import { GlobalProvider } from './context/GlobalState';

Amplify.configure(awsconfig);

const App = () => {
  const [companyName,setCompanyName] = useState('');
  const [userSession,setUserSession] = useState('');
  const [userName,setUserName] = useState('');
  const [isLoading,setIsLoading] = useState(true);

  const onPageRendered = async () => {
    let user = await Auth.currentAuthenticatedUser();
    let userToken = user.getSignInUserSession().getIdToken().getJwtToken();
    setUserSession(user.getSignInUserSession());
    let base64Url = userToken.split('.')[1];
    let var1 = base64Url.replace(/-/g,'+').replace(/_/g,'/');
    let var2 = decodeURIComponent(
      atob(var1)
        .split('')
        .map(function (c) {
          return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
        })
        .join('')
    );
    let company = var2.substring(
      var2.indexOf('company') + 10,var2.indexOf('aud') - 3
    );

    setCompanyName(company);

    let userAccountName = var2.substring(
      var2.indexOf('"name":') + 8,var2.indexOf('exp') - 3
    );
    setUserName(userAccountName);
  };

  useEffect(() => {
    onPageRendered();
  },[companyName,userName]);

  return (
    <GlobalProvider>
      <Router>
        <Header companyName={companyName} userName={userName} />
        <Sidebar />
        <main className=''>
          <Container>
            <Route path='/company' component={CompanyProfileScreen} />
            <Route path='/insights' component={InsightsScreen} />
            <Route path='/fileupload' component={FileUploadScreen} />
            <Route path='/landscape' component={DashboardScreen} />
            <Route path='/' component={WelcomeScreen} exact />
          </Container>
        </main>
      </Router>
    </GlobalProvider>
  );
};

export default App;

这是我的 Context 文件夹中的 GlobalState.js 文件：

import { createContext,useReducer } from 'react';
import AppReducer from './AppReducer';

const initialState = {
  companyName: '',};

export const GlobalContext = createContext(initialState);

export const GlobalProvider = ({ children }) => {
  const [state,dispatch] = useReducer(AppReducer,initialState);

  return (
    <GlobalContext.Provider
      value={{
        companyName: state.companyName,}}>
      {children}
    </GlobalContext.Provider>
  );
};

非常感谢您就此提出任何建议/指导，也许答案很简单，但这是漫长的一天！提前致谢。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）