React-native TypeError:无法读取未定义的属性“数据”

时间:2020-05-07 23:18:12

标签: reactjs react-native

我的项目有问题 enter image description here

D:\ React-Native \ Expo \ mobile \ node_modules \ expo \ build \ logs \ RemoteConsole.js:80可能的未处理承诺拒绝(id:0): TypeError:无法读取未定义的属性“数据” TypeError:无法读取未定义的属性“数据”

SignUp.js

import React from 'react';
import {ScrollView, KeyboardAvoidingView, CheckBox, View, Text, Platform,} from 'react-native';
import styles from './styles/authStyles';
import ScreenTitle from '../components/ScreenTitle';
import Input from '../components/input';
import Button from '../components/Button';
import axios from '../config/axios';
import { SINGNUP_URL } from '../config/urls';
import Loader from '../components/Loader';
import Alert from '../components/Alert';
export default class SignUpScreen extends React.Component
{
constructor(props) 
{
    super(props);
    this.state =
    {
        name: "",
        email: "",
        password: "",
        specialization: "",
        phone: "",
        address: "",
        workingHours: "",
        userType: false,
        location: null,
        isLoading: false,
        alert:
        {
            messages: null,
            type: "",
        }
    }
}
componentDidUpdate()
{
    if(this.state.alert.messages)
    {
        setTimeout(() =>
        {
            this.setState({alert: {messages: null}})
        }, 3000)
    }
}
componentWillUnMount()
{
    clearTimeout();
}
changeNameHandler = (value) =>
{
    this.setState({name: value})
};

changeEmailHandler = (value) =>
{
    this.setState({email: value})
};

changePasswordHandler= (value) =>
{
    this.setState({password: value})
};

changeSpecializationHandler = (value) =>
{
    this.setState({specialization: value})
};

changePhoneHandler = (value) =>
{
    this.setState({phone: value})
};

changeAddressHandler = (value) =>
{
    this.setState({address: value })
};

changeWorkingHoursHandler = (value) =>
{
    this.setState({workingHours: value})
};

changeUserTypeHandler = () =>
{
    this.setState({ userType: !this.state.userType})
}
validate() 
{
    const {name, email, password, specialization, address, phone, workingHours, userType} = this.state;
    let validationErrors = [];
    let passed = true;
    if(!name) 
    {
        validationErrors.push(" Please put your name");
        passed= false;
    }
    if(!email) 
    {
        validationErrors.push(" Please put your email");
        passed= false;
    }
    if(!password) 
    {
        validationErrors.push(" Please put your password");
        passed= false;
    }
    if(userType)
    {
        if(!specialization) 
        {
            validationErrors.push(" Please put your specialization");
            passed= false;
        }
        if(!address) 
        {
            validationErrors.push(" Please put your address");
            passed= false;
        }
        if(!phone) 
        {
            validationErrors.push(" Please put your phone nuber");
            passed= false;
        }
        if(!workingHours) 
        {
            validationErrors.push(" Please put your working hours");
            passed= false;
        }
    }
    if(validationErrors.length > 0)
    {
        this.setState({alert: {messages: validationErrors, type: "danger"}})
    }
    return passed
}

_SignUp = async () =>
{
    if(!this.validate()) return;
    this.setState({isLoading: true})
    const { name, email, password, specialization, address, phone, workingHours, userType } = this.state;
    const body =
    {
        name, 
        email, 
        password, 
        specialization, 
        address, 
        phone, 
        workingHours, 
        userType: userType ? "doctor" : 'normal',
        location:
        {
            latitude: 1,
            longitude: 2
        },
        isLoading: false
    }
    try 
    {
        const response = await axios.post(SINGNUP_URL, body);
        this.setState({
            name:'',
            email: '',
            password: '',
            specialization: '',
            address: '',
            phone: '',
            workingHours: '',
            userType: false,
            location: null

        });
        this.props.navigation.navigate("SignIn",
        {
            alert:{messages:"Your account has been successfully registered", type:"success"}
        });
    } 
    catch(e){
        this.setState({
            alert: { messages: e.response.data.message, type: "danger"},
            isLoading: false
        });

    }




}

render()
{
    const { name, email, password, specialization, address, phone, workingHours, userType, isLoading, alert } = this.state;
    return(
        <ScrollView contentContainerStyle={{paddingVertical: 40}}>
            <Loader title="A new account is creating" loading={isLoading} />
            <Alert messages={alert.messages} type={alert.type} />
            <View style={styles.container}>
                <ScreenTitle 
                    title="Create new account"
                    icon="md-person-add"
                />
                <KeyboardAvoidingView behavior="padding" enabled >

                    <Input 
                        placeholder="Name" 
                        onChangeText={this.changeNameHandler}
                        value={name} />

                    <Input 
                        placeholder="Email" 
                        onChangeText={this.changeEmailHandler}
                        value={email} />

                    <Input 
                        placeholder="Password" 
                        secureTextEntry
                        onChangeText={this.changePasswordHandler}
                        value={password} />

                    <View 
                        style={styles.checkBoxContainer}
                        >
                        <CheckBox 
                            style={styles.checkBoxLabel} 
                                value={userType} 
                                onChange={this.changeUserTypeHandler} />

                        <Text style={styles.checkBoxLabel} >Doctors</Text>

                    </View>
                    {userType && (
                        <React.Fragment>
                            <Input 
                                onChangeText={this.changeSpecializationHandler}

                                placeholder="Specialization" value = {specialization} />

                            <Input 
                                onChangeText={this.changeWorkingHoursHandler}

                                placeholder="Hours work"  value={workingHours} />

                            <Input 
                                onChangeText={this.changeAddressHandler}

                                placeholder="Address" value={address} />

                            <Input 
                                onChangeText={this.changePhoneHandler}
                                placeholder="Phone Number" value={phone} />
                        </React.Fragment>
                    )}


                    <Button 
                        text="New Account" 
                        onPress={this._SignUp}
                    />
                    <View style={{height: 30}} />
                    {/* <Button text="Home" onPress={() => this.props.navigation.navigate("Main")} />    */}
                </KeyboardAvoidingView>
            </View>
        </ScrollView>
    )
}

}

SignIn.js

import React, { Component } from 'react'
import { Text, View, KeyboardAvoidingView, AsyncStorage } from 'react-native'
import styles from './styles/authStyles';
import ScreenTitle from '../components/ScreenTitle';
import Input from '../components/input';
import Button from '../components/Button';
import axios from '../config/axios';
import { SIGNIN_URL } from '../config/urls';
import Loader from '../components/Loader';
import Alert from '../components/Alert';
import Container from '../components/Container';
import { ScrollView } from 'react-native-gesture-handler';
export default class SignIn extends Component {

constructor(props)
{
    super(props);
    this.state =
    {
        email: "",
        password: "",
        isLoading: false,
        alert:
        {
            messages: null,
            type: ""
        }
    }
}

componentDidMount()
{
    const alert = this.props.navigation.getParam('alert');
    if(alert)
    {
        this.setState({alert});
    }
}
componentDidUpdate()
{
    if(this.state.alert.messages)
    {
        setTimeout(() =>
        {
            this.setState({alert: {messages: null}})
        }, 3000)
    }
}
componentWillUnMount()
{
    clearTimeout();
}

changeEmailHandler = (value) =>
{
    this.setState({email: value})
};

changePasswordHandler= (value) =>
{
    this.setState({password: value})
};

validate() 
{
    const { email, password } = this.state;
    let validationErrors = [];
    let passed = true;

    if(!email) 
    {
        validationErrors.push(" Please put your email");
        passed= false;
    }
    if(!password) 
    {
        validationErrors.push(" Please put your password");
        passed= false;
    }

    if(validationErrors.length > 0)
    {
        this.setState({alert: {messages: validationErrors, type: "danger"}})
    }
    return passed
}
_SignIn= async () => {
    if(!this.validate()) return;

    this.setState({ isLoading: true });

    const body = {
        email: this.state.email,
        password: this.state.password
    };

    try {
        const response = await axios.post(SIGNIN_URL, body);
        this.setState({ email: "", password: "", isLoading: false });
        AsyncStorage.setItem("accessToken", response.data.accessToken);
    } catch (e) {
        this.setState({
            alert: { messages: e.response.data.message, type: "danger" },
            isLoading: false
        });
    }
}
render() {
    const {email, password, isLoading, alert} = this.state;
    return (
        <Container>
            <Alert messages={alert.messages} type={alert.type} />
            <Loader title="Login" loading={isLoading} />
            <ScrollView
            keyboardShouldPersistTaps="handled"
            contentContainerStyle={styles.container} >
                <ScreenTitle title="Login" icon="md-log-in" />
                <KeyboardAvoidingView behavior="padding" enabled>
                    <Input 
                    onChangeText={this.changeEmailHandler}
                    value={email}
                    placeholder="Email" />
                    <Input 
                    onChangeText={this.changePasswordHandler}
                    value={password}
                    secureTextEntry
                    placeholder="Password" />
                </KeyboardAvoidingView>
                <Button 
                 text="Login"
                 onPress={this._SignIn} 
                />
                <View style={{height: 30}} />
                {/* <Button text="Home" onPress={() => this.props.navigation.navigate("Main")} /> */}

            </ScrollView>
        </Container>
    )
}
}

1 个答案:

答案 0 :(得分:0)

尝试更改

catch (e) {
       this.setState({
         alert: { messages: e.response.data.message, type: "danger" },
         isLoading: false
      });
    }

收件人

catch (e) {
        let {response: {data: {message = ''} = {}} = {}} = e
        this.setState({
            alert: { messages: message, type: "danger" },
            isLoading: false
        });
    }

在进行此操作之前,请使用e检查console.log的值,并确保嵌套对象中存在消息。