您必须将组件传递给connect返回的函数。而是收到了{“ propTypes”:{}}

时间:2019-07-23 05:54:42

标签: javascript reactjs react-native

我更新了Expo,并在“连接屏幕”中收到以下消息,该消息应根据用户是否连接来更改屏幕标题。

该错误来自此行:

headerTitle: connect((state) => ({ children: this.getTitle(state) }))(Text)

错误:

You must pass a component to the function returned by connect. Instead received {"propTypes":{}}

之前效果很好,所以我不知道发生了什么。

import React, {Component} from 'react';
import PropTypes from 'prop-types';
import Logo from '../components/Logo';
import Form from '../components/Form';
import Wallpaper from '../components/Wallpaper';
import ButtonSubmit from '../components/ButtonSubmit';
import SignupSection from '../components/SignupSection';
import { Router, Scene, Actions, ActionConst } from 'react-native-router-flux';
import ErrorMessage from '../components/ErrorMessage';
import Dimensions from 'Dimensions';
import {StyleSheet, View, Text, Image, KeyboardAvoidingView} from 'react-native';
import {connect} from "react-redux";
import {ifIphoneX} from 'react-native-iphone-x-helper'

import logoImg from '@assets/images/logo.png';

class ConnexionScreen extends React.Component {
    constructor(props) {
        super(props);
        getTitle=(state)=>{{
            if(state.login.status){
                return 'MON COMPTE'
            }
            return 'CONNEXION'         
        }
      }
}
    handleSubmit() {
        console.log(this.loginform);
      }
  static navigationOptions = {
    headerTitle: connect((state) => ({ children: this.getTitle(state) }))(Text),
    headerTintColor: 'white',
    headerStyle: {
        backgroundColor: '#000',
        ...ifIphoneX({marginTop:-55}),
    },
    headerTitleStyle: {
        fontWeight: 'bold'
      },
  };
  render() {
      const { navigation, login } = this.props;
      const { status, email} = login;

    return (
        status === 0 ? (
        <Wallpaper>   
            <KeyboardAvoidingView style={styles.container} behavior="position" enabled>
                    <View style={{flex:1,flexDirection:"row",alignItems:"center", justifyContent:"center"}}>
                        <Image source={logoImg} style={styles.image} />
                    </View>
                    <ErrorMessage />
                    <Form />
                    <ButtonSubmit />
                    <View style={styles.OrContainer}>
                        <Text style={styles.Ortext}>ou</Text>
                    </View>
                    <View style={styles.buttonContainer}>
                        <Text style={styles.buttonText} onPress={()=>this.props.navigation.navigate("VIP")}>
                            DEVENIR VIP
                        </Text>
                    </View>
                    <View style={{height:50}}></View>
            </KeyboardAvoidingView>
        </Wallpaper>) :
            (
               <Wallpaper>  
                   <View style={{ flex: 1,flexDirection: "column",justifyContent: "center",alignItems: "center"}}>
                <View style={{height:200}}> 
                    <Logo />
                </View>
                 <View>
                    <Text style={{ color: "rgba(255,204,51, 1)",fontSize: 18,fontFamily: "oswald-demi-bold"}}> {`Email : ${email}`}</Text>
                    <Text style={{color:'#fff',fontSize: 18,color: "rgba(255,255,255, 1)", textAlign:"center"}} onPress={() => this.props.logout()}> {`Logout`}</Text>
                </View>
                </View>
                </Wallpaper>
            )

    );
  }
}

const mapStateToProps = ({login}) => ({login});
const mapDispatchToProps = (dispatch) => {
    const loginAction = require('@redux/LoginRedux').default
    return {
        logout: () => dispatch(loginAction.logout()),
    };
};
export default connect(mapStateToProps, mapDispatchToProps)(ConnexionScreen)

我得到的错误...任何帮助将不胜感激!

You must pass a component to the function returned by connect. Instead received {"propTypes":{}}

wrapWithConnect
    connectAdvanced.js:101:29
<unknown>
    ConnexionScreen.js:32:74
loadModuleImplementation
    require.js:292:12
<unknown>
    MainTabNavigator.js:17
loadModuleImplementation
    require.js:292:12
<unknown>
    RootNavigation.js:6
loadModuleImplementation
    require.js:292:12
<unknown>
    App.js:5
loadModuleImplementation
    require.js:292:12
<unknown>
    AppEntry.js:2
loadModuleImplementation
    require.js:292:12
guardedLoadModule
    require.js:179:45
global code
    <unknown file>:0

0 个答案:

没有答案