从前端到MongoDB后端React-Native，MongoDB的POST用户信息

Question

我有一个简单的Android登录系统，以及一个mongoDB＆Express。前端有一些输入字段，通过这些输入字段我实现了redux来访问系统所有页面中的变量。我在通过前端将用户信息从前端字段发布到数据库时遇到麻烦。

我需要确切地知道如何将这些数据从前端发布到我的猫鼬数据库中。下面是我的代码。

表格

import React, { Component } from 'react';
import { StyleSheet, View, TextInput, Text, StatusBar, TouchableOpacity } from 'react-native';
import { Field, reduxForm } from 'redux-form';
import InputText from './InputText';
import { connect } from 'react-redux';
import {bindActionCreators} from 'redux';
import {updatePlates, updateNumber} from '../actions/user';

const styles =StyleSheet.create({
  container : {
    padding:-10,
    flex: 1,
    alignItems: 'center',
    justifyContent:'center'
  },
  textDesign:{
    fontFamily: 'sans-serif-condensed',
    width: 300,
    elevation: 10,
    padding: 10,
    backgroundColor: '#ffffff',
    borderRadius: 20,
    marginVertical: 20,
    fontSize: 15,
  }
});


class Form extends Component{
  //<Text style={styles.txt}>Home: {this.props.user.email}</Text>
  render(){
    return(
      <View style={styles.container}>
      <TextInput placeholder="Car Registration Plates"
          style={styles.textDesign}
          placeholderTextColor = '#878080'
          value={this.props.user.plates}
          onChangeText={input => this.props.updatePlates(input)}
        //  underlineColorAndroid='rgba(255, 0, 0, 0.8)'
      />
      <TextInput placeholder="Mobile Number"
          style={styles.textDesign}
          placeholderTextColor = "#878080"
          value={this.props.user.number}
          onChangeText={input => this.props.updateNumber(input)}
      />
      </View>
    );
  }
}

const mapDispatchToProps = (dispatch)=>{
  return bindActionCreators({updatePlates, updateNumber},dispatch)
}

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


export default connect(mapStateToProps,mapDispatchToProps )(Form)

发布方法

router.post('/create', (req, res) => {
  console.log(req.body);
  const userData= {
    phone: String( req.body.phone).replace(/[^\d]/g, ''),
    car: req.body.contact_number
  }

  const user= new User(userData);

  user.save().then((user) =>{
    if(user){
    return user.generateAuthToken();
    } else{
      res.sendStatus(400);
    }
  }).then((token) =>{
    res.header({'x-auth': token}).send(user)
  }).catch((error) =>{
    res.status(400).send(error);
  });
});

Answer 1

根据您的问题，您希望自己的行为有副作用。因此，您需要在应用程序中使用redux thunk中间件或redux saga中间件。