Invariant Violation:对象作为使用 Expo 的 React 子对象无效

Posted

技术标签:

【中文标题】Invariant Violation:对象作为使用 Expo 的 React 子对象无效【英文标题】:Invariant Violation: Objects are not valid as a React child using Expo 【发布时间】:2019-03-09 05:44:32 【问题描述】:

我正在尝试在我的 React Native 应用程序中使用 React 的新 Context api(使用 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

如果您需要更多信息,请告诉我。您的帮助将不胜感激。 谢谢你。

【问题讨论】:

如何导出和使用UserContextProvider 组件? 感谢您的评论。我在问题中添加了一些信息。本质上,我用 UserContextProvider 包装我的应用程序的根目录,然后在我的屏幕中使用 UserContextConsumer。这能回答你的问题吗? 不客气,但我还是看不到你是怎么导出的?是否正确导出并再次导入? 我添加了导入语句, import UserContextProvider from "./contexts/UserContext";并从 '../contexts/UserContext' 导入 UserContextConsumer ;. 导出在 UserContext.js 文件中完成。 【参考方案1】:

好吧,我不知道我怎么看不到这一点,但你正试图直接渲染一个对象:token。这里:

<UserContextConsumer>
    context => 
        return context.token
    
</UserContextConsumer>

那么,你想渲染它的属性吗?

<UserContextConsumer>
    context => 
        return context.token._40
    
</UserContextConsumer>

当然也可以用其他方式使用,但是不能直接渲染。

【讨论】:

谢谢你,你是对的,我确信 context.token 是一个 String 类型,但你是对的,它实际上是一个 Object 类型。

以上是关于Invariant Violation:对象作为使用 Expo 的 React 子对象无效的主要内容,如果未能解决你的问题,请参考以下文章

Invariant Violation Invalid hook call / cross-origin error

Invariant Violation:Invariant Violation:元素类型无效:预期为字符串(对于内置组件)但得到:未定义

React Native Invariant Violation:查看配置

GatsbyJS Invariant Violation:在尝试推断 GraphQL 类型时遇到错误

Gatsby - WebpackError: Invariant Violation error with apolloClient

自定义 React Native UI 组件:Invariant Violation