文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在App.js文件中使用React上下文？

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

Stack Overflow用户

提问于 2021-02-04 13:28:40

回答 2查看 1.9K关注 0票数 2

我正在构建一个多语言应用程序。我用的是“反应”。到现在为止还好。我用上下文api创建了语言的状态，这样我就可以很容易地切换它。但是，当我尝试使用App.js：TypeError: Object中的状态时会出现此错误(无法读取属性符号(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返回语句之前的上下文，在该语句中，提供者包装子程序，但即使是这样，我仍然不知道什么可以修复它。任何帮助都将不胜感激！

javascript

reactjs

react-context

回答 2

Stack Overflow用户

回答已采纳

发布于 2021-02-04 17:44:16

我认为问题可能是因为我试图访问App.js返回语句之前的上下文。

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

根据您想要在哪里使用useContext，您可以创建一个额外的组件，它是LanguageProvider的一个子组件。那么在这个孩子里面你就可以使用useContext了。

为了给出一个简化的例子：

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

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

票数 4

Stack Overflow用户

发布于 2021-07-28 22:11:10

我在使用react导航v5应用身份验证流时也遇到了同样的问题。我试着遵循文档的原样：带有react导航v5的身份验证流，但是当试图将它与上下文混合时，我遇到了同样的问题。

和前面的答案一样，我也用同样的方法来解决这个问题。这里是一个例子，它有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>
  );
};

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/66046630

复制

相似问题

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

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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