React Context API：提供程序不提供

Question

我需要向網站添加語言更改，我使用了上下文api，但是當我使用Provider傳遞狀態時，它沒有返回任何內容

LocalSwitch位置：src / components / LocalSwitch / LocalSwitch

主頁位置：src / pages / Home / Home.js

LocaleSwitch.js

export const Context = React.createContext(require('../../locales/eng.json'))
 class LocaleSwitch extends Component {
   state = {
       locale:{}
   }
   _update = lang =>{
       this.setState({
           locale:require(`../../locales/${lang}.json`),
       }, ()=>{console.log(`${lang}`) })

   }
    render = ()=> { 
        const {Provider} = Context;
        return (
            <Provider value={this.state}>
                <Wrapper>
                    {icons.map(icon=>(
                        <img
                        key={icon}
                            src= {require(`../../assets/${icon}.png`)}
                            alt= {icon}
                            className="locale"
                            onClick={()=> this._update(icon)}
                            />
                        ))}
                </Wrapper>
           </Provider>
          );
    }

}

Home.js

    import {Context} from "../../components/LocaleSwitch/LocaleSwitch";
    class Home extends Component {
        state = {
            locale:{}
        }
        render = ()=> { 
            const {Consumer} = Context;
            return (  
             <Consumer>
                 {({locale})=>(
                    <Wrapper>
                        <Header>
                                <Hero id="hero"/>
                                <HeaderTitle id="title">
                                        {locale.titleP1} <br/> {locale.titleP2}
                                        <p>{locale.subtitle}<br/>{locale.subtitle2}</p> 
                                </HeaderTitle>   
                    </Wrapper>
                  )}
            </Consumer>   
            );
        }

    }

Answer 1

在Home.js中，您似乎沒有某個提供者作為消費者的父級。 您可能希望將上下文提供程序包裝在應用程序的根目錄中。

在這種情況下，必須將Home組件呈現在LocaleSwitch組件內部。

嘗試在Home.js中添加提供程序功能，您將明白我的意思。

const Locale = React.createContext('english')

class Home extends React.Component {
  render() {
    return (
      <Locale.Provider>
        <Locale.Consumer>
          {
            // Should print 'english'
            (locale) => {locale}
          }
        </Locale.Consumer>
      </Locale.Provider>
    )
  }
}

您正在有效地做的是

const Locale = React.createContext('english')

class LocaleSwitch extends React.Component {
  render() {
    return (
      <Locale.Provider>
        <div>I could be a locale consumer if i wanted to </div>
      </Locale.Provider>
    )
  }
}

class Home extends React.Component {
  render() {
    // I have no provider
    return (
        <Locale.Consumer>
          {
            (locale) => {locale}
          }
        </Locale.Consumer>
    )
  }
}