fix antd 多语言切换显示

src/components/app/App.jsx

@@ -28,8 +28,6 @@ import OrderApp from '../../case/OrderApp/src/App'
 import BillApp from '../../case/BillApp/src/App'
 
 
-
-
 axios.defaults.withCredentials = true;
 
 const {SubMenu} = Menu;
@@ -39,14 +37,14 @@ moment.locale('en');
 class App extends Component {
     constructor(props) {
         super(props);
-        sessionStorage.setItem("language", "English");
         this.state = {
             menuLevel1: "graphql-service",
             sideBar: "ecommerce",
             collapsed: false,
             inlineCollapsed: false,
-            locale: undefined,
-            language: sessionStorage.getItem("language"),
+            language:props.language,
+            locale: props.language === "中文" ? zhCN : undefined,
+            languageButton:props.language === "中文" ? "English" : "中文",
             visible: false
         };
     }
@@ -102,17 +100,18 @@ class App extends Component {
 
     changeLocale = (e) => {
         e.stopPropagation();
-        let language = sessionStorage.getItem("language");
+        let {language} = this.state;
         // console.log('app language',language);
-        let local = language === "中文" ? zhCN : undefined;
         let changeLanguage = language === "中文" ? "English" : "中文";
-        let nowLanguage = language === "中文" ? 'zh' : 'en';
+        let local = language === "中文" ? undefined : zhCN;
+        let languageButton = language === "中文" ?  "中文" : "English";
 
         sessionStorage.setItem("language", changeLanguage);
-        this.props.changeLanguage(nowLanguage);
+        this.props.changeLanguage(changeLanguage);
         this.setState({
             language: changeLanguage,
-            locale: local
+            locale: local,
+            languageButton:languageButton
         });
         if (!local) {
             moment.locale('en');
@@ -122,7 +121,7 @@ class App extends Component {
     };
 
     render() {
-        const {locale, language, visible} = this.state;
+        const {locale, languageButton, visible} = this.state;
 
         return (
             <Router>
@@ -158,7 +157,7 @@ class App extends Component {
                         </Link>
 
                         <div className="change-locale">
-                            <Button size="small" onClick={(e) => this.changeLocale(e)}>{language}</Button>
+                            <Button size="small" onClick={(e) => this.changeLocale(e)}>{languageButton}</Button>
                         </div>
                     </Header>
 
@@ -316,10 +315,8 @@ class App extends Component {
                                 );
                         }
                     })()}
-
                     <Create visible={visible} hideModal={this.hideModal} switchSidebar={this.switchSidebar}/>
 
-
                     <LocaleProvider locale={locale}>
                         <Layout style={{marginTop: '64px', zIndex: '0'}}
                                 key={locale ? locale.locale : 'en'/* Have to refresh for production environment */}>
@@ -421,7 +418,7 @@ class GraphqlSidebar extends Component {
                                     }
                                 </SubMenu>
 
-                                <Menu.Item key="instructions" >
+                                <Menu.Item key="instructions">
                                     <a href="https://ioobot-document.netlify.com/" title="instructions" target="_blank" rel="noopener noreferrer">
                                         <Icon type="file-text" theme="twoTone" />
                                         <span>Instructions</span>

src/index.js

@@ -24,32 +24,33 @@ const client = new ApolloClient({
 });
 
 let browserLanguage = (navigator.language || navigator.browserLanguage).toLowerCase().split('-')[0];
+let language = browserLanguage === 'zh'? "中文" : "English";
 
 class MainApp extends Component {
     constructor() {
         super();
-        sessionStorage.setItem("language", browserLanguage);
+        sessionStorage.setItem("language", language);
         this.state = {
-            nowLanguage: sessionStorage.getItem("language")
+            language: sessionStorage.getItem("language")
         };
     }
 
     changeLanguage = (language) => {
         // console.log("index changeLanguage",language);
         this.setState({
-            nowLanguage: language
+            language: language
         });
     };
 
     chooseLocale = (language) => {
         let locale, messages;
         switch (language) {
-            case 'en':
+            case "English":
                 locale = 'en';
                 messages = en_US;
                 return {locale, messages};
 
-            case 'zh':
+            case "中文":
                 locale = 'zh';
                 messages = zh_CN;
                 return {locale, messages};
@@ -62,12 +63,12 @@ class MainApp extends Component {
     };
 
     render() {
-        let {nowLanguage} = this.state;
-        let {locale, messages} = this.chooseLocale(nowLanguage);
+        let {language} = this.state;
+        let {locale, messages} = this.chooseLocale(language);
         return (
             <ApolloProvider client={client}>
                 <IntlProvider locale={locale} messages={messages}>
-                    <App changeLanguage={this.changeLanguage}/>
+                    <App language={language} changeLanguage={this.changeLanguage}/>
                 </IntlProvider>
             </ApolloProvider>
         )