javascript - 如何在 App.js 文件中使用 React 上下文？

Question

我正在构建一个多语言应用程序。我正在使用react-intl。到目前为止，一切都很好。我用 context api 创建了语言状态，这样我就可以轻松切换它。但是，当我尝试使用 App.js 中的状态时，出现此错误:TypeError: Object is not iterable (cannot read property Symbol(Symbol.iterator))。

这是我的上下文文件:

import React, {useState, createContext} from 'react'


export const LanguageContext = createContext();

export const LanguageProvider = (props) => {
const [language, setLanguage] = useState('')

return (
    <LanguageContext.Provider value = {[language,setLanguage]}>
        {props.children}
    </LanguageContext.Provider>
)
}

这是 App.js:

function App() {
const [language, setLanguage] = useContext(LanguageContext)
return (
<LanguageProvider>
  //i tried using locale={language} 
  <I18nProvider locale={LOCALES.language}>
    <CartProvider>
      <TableProvider>
        <div className="App">
          <Router>
            <Header />
            <Switch>
              <Route path='/Cart' component={Cart} />
              <Route path='/:group/:subGroup/:item' component={Item} />
              <Route path='/:group/:subGroup' component={Items} />
              <Route path='/' exact component={Home} />
              <Route path='/:group' component={Groups} />
            </Switch>
          </Router>
        </div>
      </TableProvider>
    </CartProvider>
  </I18nProvider>
</LanguageProvider>
);
}

导出默认应用

这是我用来传递给 I18nProvider 的区域设置文件:

export const LOCALES = {
ENGLISH : 'en',
FRENCH: 'fr'
}

我在哪里更改上下文值(另一个组件，而不是 App.js):

const [language, setLanguage] = useContext(LanguageContext)

以下行是从 jsx 中剪切的:

onClick={() => setLanguage('en')}

我认为问题可能是因为我试图访问 App.js return 语句之前的上下文，其中提供程序包装了子项，但即使是这种情况，我仍然不知道如何解决它。任何帮助将不胜感激!

Answer 1

I thinks the problem might be because I am trying to access the context before the App.js return statement

你说得对，这就是问题所在。

根据您想要使用 useContext 的位置，您可以创建一个额外的组件，它是 LanguageProvider 的子组件。然后在这个 child 中你可以使用useContext。

举一个简化的例子:

const App = () => {
  const [language, setLanguage] = useContext(LanguageContext);
  useEffect(() => {
    setLanguage('en');
  }, []);
  return <p>{language}</p>;
};

export default function AppWrapper() {
  return (
    <LanguageProvider>
      <App />
    </LanguageProvider>
  );
}