react-native - 道具状态正在。标识为“未定义”

Question

我是 Redux 的新手，并试图在我的应用程序中设置一个简单的身份验证系统。我正在尝试检查全局存储中是否存在令牌并相应地重定向到新窗口。但是，身份验证状态是未定义的。我使用过 React Native、React Navigation 和 Redux。

我得到
的错误：错误截图 - iOS

代码 SingupScreen.js

class SignupScreen extends React.Component{

    constructor(props){        
        super(props);        
        this.state = {
            firstName: '',
            lastName: '',
            email: '',
            password: '',
            mobile: '',
            reCheck: false,
            flag: false   
        }

    }    

    static navigationOptions = {
        title: "Signup for NDRT 24"
    }        

    componentDidMount(){
        if (this.props.auth.token != "" || this.props.auth.token != null) this.props.navigation.navigate("LoginScreen")
    }

    render(){
        return(
            <Container style={styles.signupScreen}>                
                <Content padder>                    
                    <Form>
                        <Row>
                            <Col>
                                <Item floatingLabel>
                                    <Label>First Name</Label>
                                    <Input autoCorrect={false} autoCapitalize="none" onChangeText={(text)=>this.handleFirstName(text)} />
                                </Item>
                            </Col>
                            <Col>
                                <Item floatingLabel>
                                    <Label>Last Name</Label>
                                    <Input autoCorrect={false} autoCapitalize="none" onChangeText={(text)=>this.handleLastName(text)} />
                                </Item>
                            </Col>
                        </Row>
                        <Item floatingLabel>
                            <Label>Enter Password</Label>
                            <Input secureTextEntry autoCorrect={false} autoCapitalize="none" onChangeText={(text)=>this.handlePassword(text)} />
                        </Item>
                        <Item floatingLabel style={!(this.state.reCheck)?styles.redBox:styles.normal}>
                            {(this.state.reCheck)?<Label><Text style={{color:"green"}}>Passwords Match</Text></Label>:<Label style={{color:"red"}}>Confirm password : Passwords do not match</Label>}
                            <Input secureTextEntry autoCorrect={false} onChangeText={(text)=>this.checkPassword(text)} autoCapitalize="none" />
                        </Item>                  
                        <Item floatingLabel>
                            <Label>Mobile Number</Label>
                            <Input  onChangeText={(text)=>this.handleMobile(text)} />
                        </Item>
                        <Item floatingLabel>
                            <Label>Email Address</Label>
                            <Input autoCorrect={false} autoCapitalize="none" onChangeText={(text)=>this.handleEmail(text)} />
                        </Item>
                        <Button onPress={()=>this.handleSubmit()} style={styles.nextButton} full disabled={!this.state.flag}><Text style={styles.buttonText}>Next</Text></Button>

                        <View style={styles.infoText}>
                            <Text>By clicking on Next, you will agree to our terms and conditions. You will be asked about your business details to complete the signup process.</Text>
                        </View>                        
                    </Form>
                </Content>
            </Container>
        )
    }

}

const styles = StyleSheet.create({
    redCheck:{
        color: "red"
    },
    infoText:{
        marginTop: 10,
        padding: 5
    },
    nextButton:{
        marginTop:30
    },
    signupScreen:{
        backgroundColor: "#F0F3F4"
    },
    buttonText: {
        color:"white"
    }
})

const mapStateToProps = (state) =>{
    return {
        auth: state.authReducer
    }
}

const mapDispatchToProps = (dispatch) =>{
    return {
        setToken: (token)=>{
            dispatch({
                type: "SIGNIN",
                payload: token
            })
        }
    }
}

export default connect(mapStateToProps,mapDispatchToProps)(SignupScreen)

代码App.js

import React from 'react';
import AppContainer from './Utils/Routes';
import {createStore} from 'redux';
import {Provider} from 'react-redux';

const authState = {
  token: null
}


const authReducer = (state=authState, action) =>{
  switch(action.type){
      case "SIGNIN":{
          state = {
              ...state,
              token: action.payload
          };
          break;
      }
  }
  return state;
};

const store = createStore(authReducer);

store.subscribe(()=>{

});

class App extends React.Component{
  render(){
    return(
      <Provider store={store}>
        <AppContainer />
      </Provider>
    )
  }
}

export default App;

标签： react-nativereduxreact-reduxreact-navigation

Answer 1

你从国家得到错误的价值观，

const mapStateToProps = (state) =>{
    return {
        auth: state.authReducer
    }
}

你的状态是这样的，

const authState = {
  token: null
}

您正在尝试访问state.authReducer状态中不存在的内容。所以你应该访问token，

const mapStateToProps = (state) =>{
    return {
        auth: state.token
    }
}

你应该auth像这样使用它，

if (this.props.auth !== "" || this.props.auth !== null) this.props.navigation.navigate("LoginScreen")