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

Question

我正在构建一个多语言应用程序。我正在使用反应国际。到目前为止，一切都很好。我用上下文 api 制作了语言状态，因此我可以轻松切换它。但是，当我尝试使用 App.js 中的状态时出现此错误：TypeError: Object is not iterable (cannot read 属性 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。然后在这个 child 里面你可以使用 useContext.

举个简单的例子：

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

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

Answer 2

我在尝试使用 react-navigation v5 应用身份验证流程时遇到了同样的问题。我试图按照原样遵循文档： Authentication flows with react-navigation v5 但是当我试图将它与 Context I 运行混合到同一个问题中时

和之前的回答一样，我也是用同样的方法解决的。这是一个示例，其中有 3 个可能的屏幕堆栈：

我创建了一个组件，我将在其中使用上下文

const RootStack = () => {
  const { state } = useContext(AuthContext);
  return (
      <Stack.Navigator>
          {false ? (
              <Stack.Screen name="Splash" component={SplashScreen} />
          ) : state.token === null ? (
              <Stack.Screen
                name="Authentication"
                component={AuthenticationStack}
                options={{
                  title: 'Sign in',
                  headerShown: false,
                  animationTypeForReplace: false ? 'pop' : 'push',
                }}
              />
          ) : (
              <Stack.Screen name="Home" component={AppStack} />
          )}
      </Stack.Navigator>
      );
  };

然后我将组件插入提供程序中：

export default ({ navigation }) => {
  return (
    <AuthProvider>
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen
            name="RootStack"
            component={RootStack}
            options={{
            headerShown: false,
            }}
          />
        </Stack.Navigator>
      </NavigationContainer>
    </AuthProvider>
  );
};

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

How do you use React context inside App.js file?

javascript

reactjs

react-context