Информация о пользователе POST от внешнего интерфейса до внутреннего сервера MongoDB React-Native, MongoDB - PullRequest
Новая
       33

Информация о пользователе POST от внешнего интерфейса до внутреннего сервера MongoDB React-Native, MongoDB

0 голосов
/ 13 апреля 2020

У меня есть простая Android система входа в систему и mongoDB & Express вместе с ней. У внешнего интерфейса есть несколько полей ввода, с помощью которых я реализовал избыточность для доступа к переменной на всех страницах системы. У меня проблемы с отправкой информации о пользователях из полей внешнего интерфейса в базу данных через имеющийся у меня бэкэнд.

Мне нужно точно знать, как отправить эти данные из моего внешнего интерфейса в базу данных mon goose, которая у меня есть. , Ниже мой код.

Форма 

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);
  });
});

1 Ответ

0 голосов
/ 13 апреля 2020

В соответствии с вашей проблемой вы хотите иметь побочный эффект в вашем действии. Таким образом, вам нужно использовать промежуточное программное обеспечение в вашем приложении, либо редуксное промежуточное программное обеспечение, либо саговое сокращение.

Создайте действие для передачи данных из вашего компонента. Из этого действия вызовите функцию побочного эффекта и обновите состояние, чтобы разрешить компоненту выполнить действие успешно или нет.

Создатель действия 

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); // не забудьте передать отправку

...