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

Question

我有一个简单的 Android 登录系统和一个与之配套的 mongoDB & Express。前端有一些输入字段，我用它们实现了 redux 来访问系统所有页面中的变量。我无法通过我拥有的后端将用户信息从前端字段发布到数据库。

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

表格

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)

post方法

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。

为从您的组件提交数据创建一个操作。从此动作调用副作用函数并更新状态以让组件该动作成功与否。

动作创建者

function postData(dispatch, data) { // needs to dispatch, so it is first argument
  return dispatch=> fetch("api/postdata",
    {
        body: data,
        method: "post"
    })
    .then(res => res.json())
    .then(
      data => dispatch({ type: 'POST_DATA_SUCCESS', data }),
      err => dispatch({ type: 'POST_DATA_FAILURE', err })
    );
}

在你提交的组件中

postData(this.props.dispatch, data); // 不要忘记传递 dispatch