Я пытаюсь использовать новый контекстный API React в своем приложении React Native (используя Expo).Однако я получаю ошибку.Обратите внимание, я получаю эту ошибку только при попытке абстрагировать Context.Provider в Компонент.
Вот мой код UserContext.js:
import React from "react";
import { SecureStore } from 'expo';
import { AUTH_TOKEN, FIRST_NAME, LAST_NAME, EMAIL } from '../constants/config'
// Signed-in user context
const UserContext = React.createContext();
export class UserContextProvider extends React.Component {
constructor(props) {
super(props)
this.state = {
token: SecureStore.getItemAsync(AUTH_TOKEN) || "",
firstName: SecureStore.getItemAsync(FIRST_NAME) || "",
lastName: SecureStore.getItemAsync(LAST_NAME) || "",
email: SecureStore.getItemAsync(EMAIL) || "",
};
this.setUserContext = this.setUserContext.bind(this);
}
setUserContext = (authToken, firstName, lastName, email) => {
SecureStore.setItem(AUTH_TOKEN, authToken);
SecureStore.setItem(FIRST_NAME, firstName);
SecureStore.setItem(LAST_NAME, lastName);
SecureStore.setItem(EMAIL, email);
this.setState({
authToken, firstName, lastName, email
});
};
render() {
const {children} = this.props;
return (
<UserContext.Provider
value={{
...this.state,
setUserContext: this.setUserContext,
}}
>
// TODO: Render UserContext presentation component here
<React.Fragment>
{children}
</React.Fragment>
</UserContext.Provider>
);
}
}
export const UserContextConsumer = UserContext.Consumer;
Вот часть моего кода App.js, где я использую UserContextProvider.Обратите внимание, что это корень моего приложения:
import { UserContextProvider } from "./contexts/UserContext";
export default () => {
return (
<ApolloProvider client={client}>
<UserContextProvider componentChildren={Root}>
<Root/>
</UserContextProvider>
</ApolloProvider>
);
}
Я использую UserContextConsumer в одном из моих экранов (или компонентов) следующим образом.Обратите внимание, что ошибка возникает при переходе к экрану, на котором находится приведенный ниже код:
import { UserContextConsumer } from '../contexts/UserContext';
.
.
.
<Text style={styles.textLink}>
<UserContextConsumer>
{context => {
return context.token
}}
</UserContextConsumer>
</Text>
Я получаю следующую ошибку:
Invariant Violation: Objects are not valid as a React child (found: object with keys {_40, _65, _55, _72}). If you meant to render a collection of children, use an array instead.
in RCTText (at Text.js:202)
in Text (at LoginScreen.js:26)
in RCTView (at View.js:60)
in View (at createAnimatedComponent.js:154)
in AnimatedComponent (at TouchableOpacity.js:247)
in TouchableOpacity (at LoginScreen.js:24)
in RCTView (at View.js:60)
in View (at Form.js:10)
in Form (at connectStyle.js:384)
in Styled(Form) (at LoginScreen.js:18)
in RCTView (at View.js:60)
in View (at LoginScreen.js:17)
in RCTScrollContentView (at ScrollView.js:791)
in RCTScrollView (at ScrollView.js:887)
in ScrollView (at KeyboardAwareHOC.js:397)
in _class (at Content.js:125)
in Content (at connectStyle.js:384)
in Styled(Content) (at LoginScreen.js:15)
in RCTView (at View.js:60)
in View (at Container.js:15)
in Container (at connectStyle.js:384)
in Styled(Container) (at LoginScreen.js:14)
in LoginScreen (at SceneView.js:9)
in SceneView (at StackViewLayout.js:483)
in RCTView (at View.js:60)
in View (at createAnimatedComponent.js:154)
in AnimatedComponent (at screens.native.js:51)
in Screen (at StackViewCard.js:42)
in Card (at createPointerEventsContainer.js:26)
in Container (at StackViewLayout.js:507)
in RCTView (at View.js:60)
in View (at screens.native.js:76)
in ScreenContainer (at StackViewLayout.js:401)
in RCTView (at View.js:60)
in View (at StackViewLayout.js:400)
in StackViewLayout (at withOrientation.js:30)
in withOrientation (at StackView.js:49)
in RCTView (at View.js:60)
in View (at Transitioner.js:141)
in Transitioner (at StackView.js:19)
in StackView (at createNavigator.js:59)
in Navigator (at createKeyboardAwareNavigator.js:11)
in KeyboardAwareNavigator (at createNavigationContainer.js:376)
in NavigationContainer (at SceneView.js:9)
in SceneView (at SwitchView.js:12)
in SwitchView (at createNavigator.js:59)
in Navigator (at createNavigationContainer.js:376)
in NavigationContainer (at Root.js:24)
in RCTView (at View.js:60)
in View (at Root.js:22)
in Root (at App.js:58)
in UserContextProvider (at App.js:57)
in ApolloProvider (at App.js:56)
in Unknown (at registerRootComponent.js:35)
in RootErrorBoundary (at registerRootComponent.js:34)
in ExpoRootComponent (at renderApplication.js:33)
in RCTView (at View.js:60)
in View (at AppContainer.js:102)
in RCTView (at View.js:60)
in View (at AppContainer.js:122)
in AppContainer (at renderApplication.js:32)
This error is located at:
in RCTText (at Text.js:202)
in Text (at LoginScreen.js:26)
in RCTView (at View.js:60)
in View (at createAnimatedComponent.js:154)
in AnimatedComponent (at TouchableOpacity.js:247)
in TouchableOpacity (at LoginScreen.js:24)
in RCTView (at View.js:60)
in View (at Form.js:10)
in Form (at connectStyle.js:384)
in Styled(Form) (at LoginScreen.js:18)
in RCTView (at View.js:60)
in View (at LoginScreen.js:17)
in RCTScrollContentView (at ScrollView.js:791)
in RCTScrollView (at ScrollView.js:887)
in ScrollView (at KeyboardAwareHOC.js:397)
in _class (at Content.js:125)
in Content (at connectStyle.js:384)
in Styled(Content) (at LoginScreen.js:15)
in RCTView (at View.js:60)
in View (at Container.js:15)
in Container (at connectStyle.js:384)
in Styled(Container) (at LoginScreen.js:14)
in LoginScreen (at SceneView.js:9)
in SceneView (at StackViewLayout.js:483)
in RCTView (at View.js:60)
in View (at createAnimatedComponent.js:154)
in AnimatedComponent (at screens.native.js:51)
in Screen (at StackViewCard.js:42)
in Card (at createPointerEventsContainer.js:26)
in Container (at StackViewLayout.js:507)
in RCTView (at View.js:60)
in View (at screens.native.js:76)
in ScreenContainer (at StackViewLayout.js:401)
in RCTView (at View.js:60)
in View (at StackViewLayout.js:400)
in StackViewLayout (at withOrientation.js:30)
in withOrientation (at StackView.js:49)
in RCTView (at View.js:60)
in View (at Transitioner.js:141)
in Transitioner (at StackView.js:19)
in StackView (at createNavigator.js:59)
in Navigator (at createKeyboardAwareNavigator.js:11)
in KeyboardAwareNavigator (at createNavigationContainer.js:376)
in NavigationContainer (at SceneView.js:9)
in SceneView (at SwitchView.js:12)
in SwitchView (at createNavigator.js:59)
in Navigator (at createNavigationContainer.js:376)
in NavigationContainer (at Root.js:24)
in RCTView (at View.js:60)
in View (at Root.js:22)
in Root (at App.js:58)
in UserContextProvider (at App.js:57)
in ApolloProvider (at App.js:56)
in Unknown (at registerRootComponent.js:35)
in RootErrorBoundary (at registerRootComponent.js:34)
in ExpoRootComponent (at renderApplication.js:33)
in RCTView (at View.js:60)
in View (at AppContainer.js:102)
in RCTView (at View.js:60)
in View (at AppContainer.js:122)
in AppContainer (at renderApplication.js:32)
throwOnInvalidObjectType
AppEntry.bundle?platform=ios&dev=true&minify=false&hot=false&assetPlugin=%2FUsers%2FPasha%2Freact-native-projects%2Fexpo%2Fyumm%2Fnode_modules%2Fexpo%2Ftools%2FhashAssetFiles:9955:20
reconcileChildFibers
AppEntry.bundle?platform=ios&dev=true&minify=false&hot=false&assetPlugin=%2FUsers%2FPasha%2Freact-native-projects%2Fexpo%2Fyumm%2Fnode_modules%2Fexpo%2Ftools%2FhashAssetFiles:10650:37
reconcileChildrenAtExpirationTime
AppEntry.bundle?platform=ios&dev=true&minify=false&hot=false&assetPlugin=%2FUsers%2FPasha%2Freact-native-projects%2Fexpo%2Fyumm%2Fnode_modules%2Fexpo%2Ftools%2FhashAssetFiles:10749:52
reconcileChildren
AppEntry.bundle?platform=ios&dev=true&minify=false&hot=false&assetPlugin=%2FUsers%2FPasha%2Freact-native-projects%2Fexpo%2Fyumm%2Fnode_modules%2Fexpo%2Ftools%2FhashAssetFiles:10744:44
updateContextConsumer
AppEntry.bundle?platform=ios&dev=true&minify=false&hot=false&assetPlugin=%2FUsers%2FPasha%2Freact-native-projects%2Fexpo%2Fyumm%2Fnode_modules%2Fexpo%2Ftools%2FhashAssetFiles:11295:28
performUnitOfWork
AppEntry.bundle?platform=ios&dev=true&minify=false&hot=false&assetPlugin=%2FUsers%2FPasha%2Freact-native-projects%2Fexpo%2Fyumm%2Fnode_modules%2Fexpo%2Ftools%2FhashAssetFiles:14020:31
workLoop
AppEntry.bundle?platform=ios&dev=true&minify=false&hot=false&assetPlugin=%2FUsers%2FPasha%2Freact-native-projects%2Fexpo%2Fyumm%2Fnode_modules%2Fexpo%2Ftools%2FhashAssetFiles:14044:49
renderRoot
AppEntry.bundle?platform=ios&dev=true&minify=false&hot=false&assetPlugin=%2FUsers%2FPasha%2Freact-native-projects%2Fexpo%2Fyumm%2Fnode_modules%2Fexpo%2Ftools%2FhashAssetFiles:14070:23
performWorkOnRoot
AppEntry.bundle?platform=ios&dev=true&minify=false&hot=false&assetPlugin=%2FUsers%2FPasha%2Freact-native-projects%2Fexpo%2Fyumm%2Fnode_modules%2Fexpo%2Ftools%2FhashAssetFiles:14561:40
performWork
AppEntry.bundle?platform=ios&dev=true&minify=false&hot=false&assetPlugin=%2FUsers%2FPasha%2Freact-native-projects%2Fexpo%2Fyumm%2Fnode_modules%2Fexpo%2Ftools%2FhashAssetFiles:14493:32
performSyncWork
AppEntry.bundle?platform=ios&dev=true&minify=false&hot=false&assetPlugin=%2FUsers%2FPasha%2Freact-native-projects%2Fexpo%2Fyumm%2Fnode_modules%2Fexpo%2Ftools%2FhashAssetFiles:14473:22
batchedUpdates
AppEntry.bundle?platform=ios&dev=true&minify=false&hot=false&assetPlugin=%2FUsers%2FPasha%2Freact-native-projects%2Fexpo%2Fyumm%2Fnode_modules%2Fexpo%2Ftools%2FhashAssetFiles:14643:30
batchedUpdates
AppEntry.bundle?platform=ios&dev=true&minify=false&hot=false&assetPlugin=%2FUsers%2FPasha%2Freact-native-projects%2Fexpo%2Fyumm%2Fnode_modules%2Fexpo%2Ftools%2FhashAssetFiles:6775:33
_receiveRootNodeIDEvent
AppEntry.bundle?platform=ios&dev=true&minify=fal
Пожалуйста, дайте мне знать, есливам нужна дополнительная информацияВаша помощь будет принята с благодарностью.
Спасибо.