Question

我正在尝试在我的应用程序上设置身份验证，但在触发调度方法的已创建身份验证操作 signIn() 上一直低于错误。我能够在最近创建的 Web 应用程序上成功使用此方法，并且希望使用与在移动应用程序上使用 Redux 相同的方法。一切似乎都运行良好，除非调用操作 signIn 通过 Formik 和 Yup Validation 传入一个对象，其中包含来自用户输入的值。

警告：从 submitForm() 中捕获到未处理的错误，[TypeError: undefined is not an object (evaluating '_ref.credentials')]

node_modules\react-native\Libraries\LogBox\LogBox.js:117:10 in registerWarning 我不知道为什么它不接受一个对象，因为从 Formik 收集的值是一个具有电子邮件和密码属性的对象。

下面是代码。任何建议或解决方案都会有很大帮助。谢谢。

import { connect } from 'react-redux'
import { signIn } from '../store/actions/authActions'

import React, { useState } from 'react';
import { StyleSheet, Button, TextInput, View, Text,FlatList } from 'react-native';
import { globalStyles } from '../styles/global.js';
import { Formik } from 'formik';
import * as yup from 'yup';
import OrderButton from '../shared/orderButton';

const reviewSchema = yup.object({
  email: yup.string().email('Invalid email.').required('Required'),  
  password: yup.string().required('Password is required'),
});


function SignInForm(props) {
  const { signIn, auth, authError, navigation } = props;
  const [focus, setFocus] = useState(props.focus);

 console.log(signIn)
 console.log(authError)

  return (
    
      <View style={globalStyles.container}>
        <Formik
          initialValues={{ email: '', password: '' }}
          validationSchema={loginSchema}
          onSubmit={(values, actions) => {
   
            actions.resetForm(); 
            signIn(values);
            // tried this also still dont work signIn({values});
            // tried this also still dont work signIn({ email: values.email, password: values.password });
  
        
            if (auth.uid) navigation.navigate('Home')
          }}
        >
          {props => (
            <View>
              <TextInput 
              style={globalStyles.input}
              placeholder='Email'
              onChangeText={props.handleChange('email')}
              onBlur={props.handleBlur('email')}
              value={props.values.email}

            />
              {console.log(props.values.email)}
              <Text style={globalStyles.errorText}>{props.touched.email && props.errors.email}</Text>
              <TextInput 
                style={globalStyles.input}
                placeholder='Password'
                onChangeText={props.handleChange('password')}
                onFocus={() => setFocus(true)}
                onBlur={props.handleBlur('password')} 
                // secureTextEntry={secure}
                value={props.values.password}
              />
              <Text style={globalStyles.errorText}>{props.touched.password && props.errors.password}</Text>

            <OrderButton text='submit' onPress={props.handleSubmit} />            
              {/* <FlatButton onPress={props.handleSubmit} text='submit' /> */}
            </View>
          )}
            
        </Formik>
      </View>
      
    );
  }

  const mapStateToProps = (state) => {
    return{
      authError: state.auth.authError,
      auth: state.firebase.auth
    }
  }
  
  const mapDispatchToProps = (dispatch) => {
    return {
      signIn: ({ creds }) => dispatch(signIn(creds)),
      // signUp: (creds) => dispatch(signUp(creds))
    }
  }
  
  export default connect(mapStateToProps, mapDispatchToProps)(SignInForm)


// auth actions
export const signIn = (credentials) => {
  return (dispatch, getState, {getFirebase}) => {
    const firebase = getFirebase();
    
    firebase.auth().signInWithEmailAndPassword(
      credentials.email,
      credentials.password
    ).then(() => {
      dispatch({ type: 'LOGIN_SUCCESS' });
    }).catch((err) => {
      dispatch({ type: 'LOGIN_ERROR', err });
    });

  }
}

React Native（使用 Expo）Firebase 身份验证

0 个答案: