使用 React-Hook 表单，如何在 React Native 中将数据发布到我的 MongoDB

Question

我正面临一个问题，我试图在 React Native 上使用 React Hooks 从前端将数据发布到我的 mongoDB。 问题是我努力将 TextInput 中的值获取到可以通过 URL 传递的对象中，或者存储 TextInput 值的状态以便我可以传递给 API？

import {
  Text,
  SafeAreaView,
  View,
  TouchableOpacity,
  TextInput
} from 'react-native';
import React  from 'react';
import {useNavigation} from '@react-navigation/core';
import Toast from "react-native-toast-message";
import axios from "axios";
import { useForm, Controller } from "react-hook-form";

const EMAIL_REGEX = /^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;

const SignUp = () => {

  const { control, watch, handleSubmit, formState: { errors } } = useForm({
    defaultValues: {
      emailAddress: '',
      password: '',
      confirmPassword: ''
    }
  });
  const password = watch('password');
  const navigation = useNavigation();

  const register = () => {
    
    let user = { email: email,  password: password };

    axios.post(`http://192.168.41.45:3001/register`, user).then((res) => {
      if (res.status == 200) {
        Toast.show({
            topOffset: 60,
            type: "success",
            text1: "Registration Succeeded",
            text2: "Please Login into your account",
          });
          setTimeout(() => {
            navigation.navigate('Login')
          }, 500);
        }
      }).catch((error) => {
        Toast.show({
          topOffset: 60,
          type: error,
          text1: "Something went wrong",
          text2: "Please try again",
      });
    });
  };
    
  return (
      <SafeAreaView style={{flex: 1, backgroundColor: '#fff'}}>
        <View style={{justifyContent: 'center', flex: 1}}>

            <View style={styles.input}>
              <Text style={styles.input}>
                  Register Account
            </Text>
            
            <View style={styles.input}>
                Complete your details to continue
              </Text> 
            </View>

          </View>

          <View style={styles.input}>
            <Controller
              name="email"
              control={control}
              rules={{
                required: 'Email is required',
                pattern: {value: EMAIL_REGEX, message: 'Email is invalid'},
              }} 
              render={({ field: { onChange, onBlur, value }, fieldState: {error} }) => (
                <TextInput
                  style={{height: 55,width: 330, padding: 15, alignItems: "center", borderRadius: 25, borderWidth: 2, margin: 12,
                          borderColor: error ? 'red' : 'black'}}
                  onChangeText={onChange}
                  onBlur={onBlur}
                  value={value}
                  placeholder="Enter your Email Address"
                  placeholderTextColor={'#000'}
                  underlineColorAndroid='transparent'
                  autoCompleteType='email'
                  keyboardType='email-address'
                  returnKeyType='next'
                  returnKeyLabel='next'
                />
              )}
            />
              {errors.emailAddress && <Text style={{color: 'red'}}>Email is required.</Text>}
          </View>

            <View style={styles.input}>
              <Controller
                name="password"
                control={control}
                rules={{
                  minLength: {value: 6, message: 'Password should be minimum 6 characters long'},
                  required: true,
                }} 
                render={({ field: { onChange, onBlur, value }, fieldState: {error} }) => (
                  <TextInput
                    style={{height: 55,width: 330, padding: 15, alignItems: "center", borderRadius: 25, borderWidth: 2, margin: 12, borderColor: error ? 'red' : 'black'}}
                    onChangeText={onChange}
                    onBlur={onBlur}
                    value={value}
                    placeholder="Enter your Password"
                    placeholderTextColor={'#000'}
                    autoCompleteType='password'
                    autoCapitalize='none'
                    returnKeyType='go'
                    returnKeyLabel='go'
                  />
                )}
              />
                {errors.password && <Text style={{color: 'red'}}>Password length is not strong.</Text>}
            </View>

            <View style={styles.input}>
              <Controller
                name="confirm-password"
                control={control}
                rules={{
                  minLength: {value: 6, message: 'Password should be minimum 6 characters long'},
                  required: true,
                  validate: value => value === password || 'Password do not match',
                }} 
                render={({ field: { onChange, onBlur, value }, fieldState: {error} }) => (
                  <TextInput
                    style={{height: 55,width: 330, padding: 15, alignItems: "center", borderRadius: 25, borderWidth: 2, margin: 12, borderColor: error ? 'red' : 'black'}}
                    onChangeText={onChange}
                    onBlur={onBlur}
                    value={value}
                    placeholder="Confirm your Password"
                    placeholderTextColor={'#000'}
                    autoCompleteType='password'
                    autoCapitalize='none'
                    returnKeyType='go'
                    returnKeyLabel='go'
                  />
                )}
              />
                {errors.confirmPassword && <Text style={{color: 'red'}}>Password length is not strong.</Text>}
            </View>


          <View style={styles.input}>
              <TouchableOpacity style={styles.input}
                  // onPress={() => navigation.navigate('MainTabNavigation')}
                  onPress={handleSubmit(register)}
              >
                <Text style={styles.button}>
                    Sign Up
                </Text>
              </TouchableOpacity>
          </View>

          <TouchableOpacity style={styles.input} onPress={() => navigation.navigate('SignIn')}>
                <Text style={styles.input}>
                    Already Have an Account? {""}
                    <Text style={{fontWeight: 'bold'}} >
                        Sign In
                    </Text>
                </Text>
          </TouchableOpacity>

        </View>
      </SafeAreaView>
  );
};

export default SignUp;

Answer 1

在register()您不接受handleSubmit()传入的道具，这些道具在您调用handleSubmit(register)时传递，这是您可以复制/粘贴的代码

import {
  Text,
  SafeAreaView,
  View,
  TouchableOpacity,
  TextInput,
  StyleSheet,
} from 'react-native';
import React from 'react';
import {useNavigation} from '@react-navigation/core';
import Toast from 'react-native-toast-message';
import axios from 'axios';
import {useForm, Controller} from 'react-hook-form';

const EMAIL_REGEX =
  /^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;

const SignUp = () => {
  const {
    control,
    watch,
    handleSubmit,
    formState: {errors},
  } = useForm({
    defaultValues: {
      emailAddress: '',
      password: '',
      confirmPassword: '',
    },
  });
  const password = watch('password');
  const navigation = useNavigation();

  const register = ({email, password}) => {
    let user = {email, password}; // because key: value are the same

    axios
      .post(`http://192.168.41.45:3001/register`, user)
      .then(res => {
        if (res.status == 200) {
          Toast.show({
            topOffset: 60,
            type: 'success',
            text1: 'Registration Succeeded',
            text2: 'Please Login into your account',
          });
          setTimeout(() => {
            navigation.navigate('Login');
          }, 500);
        }
      })
      .catch(error => {
        Toast.show({
          topOffset: 60,
          type: error,
          text1: 'Something went wrong',
          text2: 'Please try again',
        });
      });
  };

  return (
    <SafeAreaView style={{flex: 1, backgroundColor: '#fff'}}>
      <View style={{justifyContent: 'center', flex: 1}}>
        <View style={styles.input}>
          <Text style={styles.input}>Register Account</Text>

          <View style={styles.input}>
            <Text>Complete your details to continue</Text>
          </View>
        </View>
        {errors && console.log(errors)}

        <View style={styles.input}>
          <Controller
            name="email"
            control={control}
            rules={{
              required: 'Email is required',
              pattern: {value: EMAIL_REGEX, message: 'Email is invalid'},
            }}
            render={({
              field: {onChange, onBlur, value},
              fieldState: {error},
            }) => (
              <TextInput
                style={{
                  height: 55,
                  width: 330,
                  padding: 15,
                  alignItems: 'center',
                  borderRadius: 25,
                  borderWidth: 2,
                  margin: 12,
                  borderColor: error ? 'red' : 'black',
                }}
                onChangeText={onChange}
                onBlur={onBlur}
                value={value}
                placeholder="Enter your Email Address"
                placeholderTextColor={'#000'}
                underlineColorAndroid="transparent"
                autoCompleteType="email"
                keyboardType="email-address"
                returnKeyType="next"
                returnKeyLabel="next"
              />
            )}
          />
          {errors.emailAddress && (
            <Text style={{color: 'red'}}>Email is required.</Text>
          )}
        </View>

        <View style={styles.input}>
          <Controller
            name="password"
            control={control}
            rules={{
              minLength: {
                value: 6,
                message: 'Password should be minimum 6 characters long',
              },
              required: true,
            }}
            render={({
              field: {onChange, onBlur, value},
              fieldState: {error},
            }) => (
              <TextInput
                style={{
                  height: 55,
                  width: 330,
                  padding: 15,
                  alignItems: 'center',
                  borderRadius: 25,
                  borderWidth: 2,
                  margin: 12,
                  borderColor: error ? 'red' : 'black',
                }}
                onChangeText={onChange}
                onBlur={onBlur}
                value={value}
                placeholder="Enter your Password"
                placeholderTextColor={'#000'}
                autoCompleteType="password"
                autoCapitalize="none"
                returnKeyType="go"
                returnKeyLabel="go"
              />
            )}
          />
          {errors.password && (
            <Text style={{color: 'red'}}>Password length is not strong.</Text>
          )}
        </View>

        <View style={styles.input}>
          <Controller
            name="confirm-password"
            control={control}
            rules={{
              minLength: {
                value: 6,
                message: 'Password should be minimum 6 characters long',
              },
              required: true,
              validate: value => value === password || 'Password do not match',
            }}
            render={({
              field: {onChange, onBlur, value},
              fieldState: {error},
            }) => (
              <TextInput
                style={{
                  height: 55,
                  width: 330,
                  padding: 15,
                  alignItems: 'center',
                  borderRadius: 25,
                  borderWidth: 2,
                  margin: 12,
                  borderColor: error ? 'red' : 'black',
                }}
                onChangeText={onChange}
                onBlur={onBlur}
                value={value}
                placeholder="Confirm your Password"
                placeholderTextColor={'#000'}
                autoCompleteType="password"
                autoCapitalize="none"
                returnKeyType="go"
                returnKeyLabel="go"
              />
            )}
          />
          {errors.confirmPassword && (
            <Text style={{color: 'red'}}>Password length is not strong.</Text>
          )}
        </View>

        <View style={styles.input}>
          <TouchableOpacity
            style={styles.input}
            // onPress={() => navigation.navigate('MainTabNavigation')}
            onPress={handleSubmit(register)}>
            <Text style={styles.button}>Sign Up</Text>
          </TouchableOpacity>
        </View>

        <TouchableOpacity
          style={styles.input}
          onPress={() => navigation.navigate('SignIn')}>
          <Text style={styles.input}>
            Already Have an Account? {''}
            <Text style={{fontWeight: 'bold'}}>Sign In</Text>
          </Text>
        </TouchableOpacity>
      </View>
    </SafeAreaView>
  );
};

export default SignUp;

const styles = StyleSheet.create({
  input: {},
});

我希望这会有所帮助，快乐的编码。 来自坦桑尼亚的问候