Javascript react native-使用API请求验证表单

我想验证与修改密码的用户相关的密码。为了更好的安全性，我决定在服务器端这样做。我在服务器中使用bcryptjs来实现这一点。我向服务器发送用户id和密码。服务器从用户集合中找到文档（我使用MongoDB作为DB），对请求中的文本进行散列，并将散列文本与用户文档中的散列密码进行比较。如果它们将服务器响应与true匹配，否则服务器响应与false匹配

我用邮递员检查API。它工作得很好，但是当我使用代码进行本机响应时，来自API的响应是未定义的。为什么呢

import React, {Component} from 'react';
import {
  StyleSheet,
  ScrollView,
  Text,
  View,
  TextInput,
  Keyboard, 
  ToastAndroid,
} from 'react-native';
import {GreenButtonSmall} from './../components/customButtons';
import BackArrow from '../components/backArrow';
import axios from 'axios';
import {Formik} from 'formik';
import * as yup from 'yup';

//form validator
const validationScheme = yup.object({
  newPassword: yup.string().min(1),
  reTypeNewPassword: yup.string().min(1),
  oldPassword: yup.string().min(1),
});

export default class AccountSettingsScreen extends Component {
  constructor(props) {
    super(props);
    this.state = {
      newPassword: '',
      updated_at: new Date(),
      oldPassword: '',
      reNewPassword: '',
      password: '',
    };
    this.updateValues = this.updateValues.bind(this);
    this.checkHashedPassword= this.checkHashedPassword.bind(this);
  }


    checkHashedPassword(id,password){
    //const chekPassword = {id,password}
    const chekPassword = { id  ,  password  }

    axios
      .post(
        'https://ancient-temple.herokuapp.com/users/check',
         chekPassword
        )
      .then(  (res) => {
        const result =   res.data  
       // console.log(result); 
        return  result;
      })
      .catch((error) => console.log(error));
  }


  componentDidMount() {
    //get profile details usind _id
    axios
      .get(
        ' https://ancient-temple.herokuapp.com/users/get/5ecb578fb2b10b0844de4cff',
      )
      .then((res) => {
        const userData = res.data;

        this.setState({...userData, enabled: true});
      })
      .catch((error) => console.log(error));
  }



  updateValues(values) {
    Keyboard.dismiss();
    this.checkHashedPassword('5edca42b9d784d2ee4981654',values['oldPassword']).then(()=>{

    console.log(this.checkHashedPassword('5edca42b9d784d2ee4981654',values['oldPassword']), 'This');
    })


    if (values.newPassword != values.reNewPassword) {
      ToastAndroid.show('Re enter new password correctly', ToastAndroid.SHORT);
    } else if ( !this.checkHashedPassword('5edca42b9d784d2ee4981654',values['oldPassword'])){
      console.log(values['oldPassword']);
      ToastAndroid.show('Re enter old password correctly', ToastAndroid.SHORT);
    } else if (this.checkHashedPassword('5edca42b9d784d2ee4981654',values['oldPassword'])) {
      axios
        .put(
          ' https://ancient-temple.herokuapp.com/users/update/5ec66db7aa16ff3a80870c9a',
          {password: values.newPassword},
        )
        .then((res) => {
          ToastAndroid.show('Update succesfull !', ToastAndroid.SHORT);
        })
        .catch((error) => console.log(error));
    }

    //console.log(JSON.stringify({...values}, null, 2));
  }

  render() {
    return (
      <View style={styles.container}>
        <ScrollView showsVerticalScrollIndicator={false}>
          <BackArrow />

          <View style={{height: 590}}>
            <Text style={styles.titleText}>Account settings</Text>

            <View style={styles.card}>
              <Formik
                initialValues={{
                  newPassword: '',
                  reNewPassword: '',
                  oldPassword: '',
                }}
                enableReinitialize
                validationSchema={validationScheme}
                onSubmit={(values) => {
                  this.updateValues(values);
                }}>
                {(props) => (
                  <View>
                    <Text style={styles.inputTitles}>New password</Text>
                    <TextInput
                      placeholder={'Enter new password here'}
                      onChangeText={props.handleChange('newPassword')}
                      value={props.values.newPassword}
                      style={[
                        styles.inputs,
                        ,
                        props.errors.newPassword
                          ? styles.errorText
                          : styles.inputs,
                      ]}
                    />

                    <Text style={styles.inputTitles}>
                      Re enter new password
                    </Text>
                    <TextInput
                      placeholder={'re-enter new password'}
                      onChangeText={props.handleChange('reNewPassword')}
                      value={props.values.reNewPassword}
                      style={[
                        styles.inputs,
                        props.errors.reNewPassword
                          ? styles.errorText
                          : styles.inputs,
                      ]}
                    />
                    <Text style={styles.inputTitles}>Old password</Text>
                    <TextInput
                      placeholder={'Enter old password here'}
                      onChangeText={props.handleChange('oldPassword')}
                      value={props.values.oldPassword}
                      style={[
                        styles.inputs,
                        props.errors.oldPassword
                          ? styles.errorText
                          : styles.inputs,
                      ]}
                    />
                    <Text style={styles.infoText}>
                      {' '}
                      Minimum password length is 6 characters
                    </Text>
                    <View style={styles.buttoContainer}>
                      <GreenButtonSmall
                        text={'Save changes'}
                        onPress={props.handleSubmit}
                      />
                    </View>
                  </View>
                )}
              </Formik>
            </View>
          </View>
        </ScrollView>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexGrow: 1,
    backgroundColor: '#E4E4E4',
  },

  buttoContainer: {
    position: 'relative',
    marginTop: 20,
    alignItems: 'center',
  },

  titleText: {
    fontFamily: 'Segoe UI',
    fontSize: 30,
    position: 'relative',
    left: '7%',
    top: 72,
  },

  infoText: {
    fontFamily: 'Segoe UI',
    fontSize: 14,
    position: 'relative',
    left: '7%',
    top: '7%',
    marginTop: 1,
  },

  inputTitles: {
    fontFamily: 'Segoe UI',
    fontSize: 18,
    position: 'relative',
    left: '7%',
    top: '8%',
    marginTop: 12,
  },

  cardContent: {
    paddingHorizontal: '10%',
    marginHorizontal: 10,
  },

  inputs: {
    marginTop: 16,
    top: '2%',
    borderBottomColor: '#DADADA',
    borderBottomWidth: 1,
    width: '70%',
    marginHorizontal: '15%',
    fontFamily: 'Segoe UI',
    fontSize: 16,
    color: '#404040',
    paddingTop: 5,
    paddingBottom: 1,
  },

  errorText: {
    color: 'red',
  },

  card: {
    borderRadius: 6,
    backgroundColor: 'white',
    shadowOpacity: 0.3,
    shadowOffset: {width: 1, height: 1},
    marginHorizontal: 4,
    left: '6.5%',
    top: 120,
    height: 390,
    width: '85%',
    margin: 'auto',
    position: 'relative',
  },
});

import React，{Component}来自'React'；
进口{
样式表，
滚动视图，
文本，
看法
文本输入，
键盘
蟾蜍，
}从“反应本机”；
从“/../components/customButtons”导入{GreenButtonSmall}；
从“../components/BackArrow”导入BackArrow；
从“axios”导入axios；
从'Formik'导入{Formik}；
从“是”以是的形式导入*；
//表单验证程序
const validationScheme=yup.object({
新密码：yup.string（）.min（1），
reTypeNewPassword:yup.string（）.min（1），
oldPassword:yup.string（）.min（1），
});
导出默认类AccountSettingsScreen扩展组件{
建造师（道具）{
超级（道具）；
此.state={
新密码：“”，
更新时间：新日期（），
旧密码：“”，
更新密码：“”，
密码：“”，
};
this.updateValues=this.updateValues.bind（this）；
this.checkHashedPassword=this.checkHashedPassword.bind（this）；
}
checkHashedPassword（id、密码）{
//const chekPassword={id，密码}
const chekPassword={id，密码}
axios
.邮政(
'https://ancient-temple.herokuapp.com/users/check',
支票密码
)
。然后（（res）=>{
const result=res.data
//控制台日志（结果）；
返回结果；
})
.catch（（错误）=>console.log（错误））；
}
componentDidMount（）{
//使用ind\u id获取配置文件详细信息
axios
.得到(
' https://ancient-temple.herokuapp.com/users/get/5ecb578fb2b10b0844de4cff',
)
。然后（（res）=>{
const userData=res.data；
this.setState（{…userData，enabled:true}）；
})
.catch（（错误）=>console.log（错误））；
}
更新值（值）{
键盘；
检查hashedpassword（'5edca42b9d784d2ee4981654'，值['oldPassword']）。然后（（）=>{
log（this.checkHashedPassword（'5edca42b9d784d2ee4981654'，值['oldPassword']），'this'）；
})
if（values.newPassword！=values.reNewPassword）{
ToastAndroid.show（'正确重新输入新密码'，ToastAndroid.SHORT）；
}否则如果（！this.checkHashedPassword（'5edca42b9d784d2ee4981654'，值['oldPassword']））{
log（值['oldPassword']）；
ToastAndroid.show（'正确重新输入旧密码'，ToastAndroid.SHORT）；
}else if（此.checkHashedPassword（'5edca42b9d784d2ee4981654'，值['oldPassword']））{
axios
.放(
' https://ancient-temple.herokuapp.com/users/update/5ec66db7aa16ff3a80870c9a',
{password:values.newPassword}，
)
。然后（（res）=>{
ToastAndroid.show（'updatesuccessfull！'，ToastAndroid.SHORT）；
})
.catch（（错误）=>console.log（错误））；
}
//log（JSON.stringify（{…values}，null，2））；
}
render（）{
返回(
帐户设置
{
此.updateValue（值）；
}}>
{（道具）=>(
新密码
重新输入新密码
旧密码
{' '}
最小密码长度为6个字符
)}
);
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
flexGrow:1，
背景颜色：“#e4”，
},
按钮容器：{
位置：'相对'，
玛金托普：20，
对齐项目：“居中”，
},
标题文字：{
fontFamily:“Segoe UI”，
尺寸：30，
位置：'相对'，
左：“7%”，
前72名，
},
信息文本：{
fontFamily:“Segoe UI”，
尺寸：14，
位置：'相对'，
左：“7%”，
前几名：“7%”，
马金托普：1，
},
输入：{
fontFamily:“Segoe UI”，
尺码：18，
位置：'相对'，
左：“7%”，
前几名：“8%”，
玛金托普：12，
},
卡片内容：{
填充水平：“10%”，
marginHorizontal:10，
},
投入：{
玛金托普：16，
前几名：“2%”，
borderBottomColor:“#DADADA”，
边界宽度：1，
宽度：“70%”，
marginHorizontal：“15%，
fontFamily:“Segoe UI”，
尺寸：16，
颜色：“#404040”，
paddingTop:5，
填充底部：1，
},
错误文本：{
颜色：“红色”，
},
卡片：{
边界半径：6，
背景颜色：“白色”，
阴影不透明度：0.3，
阴影偏移：{宽度：1，高度：1}，
marginHorizontal:4，
左：6.5%，
排名：120，
身高：390，
宽度：“85%”，
页边空白：“自动”，
位置：'相对'，
},
});