MERN Stack - отправка нескольких входных значений формы в MongoDB

Question

Я новичок в стеке MERN, и у меня есть приложение, которое я сейчас пытаюсь расширить ... Я могу загрузить одно значение в базу данных без проблем, и я играю с другими аспектами .

Я не уверен, нужен ли мне axios для этого или я могу просто использовать router.post?

Я пытаюсь создать форму с более чем одним вводом, используя axios.post или что-то еще, что может быть лучше для моего URI MongoDB.

Можете ли вы помочь мне с этим, очевидно, отсюда я могу перейти на полные формы и прочее. Спасибо!

Схема БД Предметы

  const mongoose = require('mongoose');
  const Schema = mongoose.Schema;

  //Create Schema
  const ItemSchema = new Schema(
     {
         name: {
            type: String,
            required: true
        },
            email: {
            type: String,
            required: true
        }
    }
);

module.exports = item = mongoose.model('item', ItemSchema);

ItemModal - всплывающее окно формы

import React, { Component } from 'react';
import {
  Button,
  Modal,
  ModalHeader,
  ModalBody,
  Form,
  FormGroup,
  Label,
  Input
} from 'reactstrap';
import { connect } from 'react-redux';
import { addItem } from '../actions/itemActions';

class ItemModal extends Component {
  state = {
    modal: false,
    name: '',
    email: ''
  };

  toggle = () => {
    this.setState({
      modal: !this.state.modal
    });
  };

  onChange = e => {
    this.setState({ [e.target.name]: e.target.value });
    this.setState({ [e.target.email]: e.target.value });
  };

  onSubmit = e => {
    e.preventDefault();

    const newItem = {
      name: this.state.name,
      email: this.state.email
    };

    // Add item via addItem action
        this.props.addItem(newItem);

        // Close modal
        this.toggle();
      };

      render() {
        return (
          <div>
            <Button
              color="dark"
              style={{ marginBottom: '2rem' }}
              onClick={this.toggle}
            >
              Add Item
            </Button>

            <Modal isOpen={this.state.modal} toggle={this.toggle}>
              <ModalHeader toggle={this.toggle}>Add To List</ModalHeader>
              <ModalBody>
                <Form onSubmit={this.onSubmit}>
                  <FormGroup>
                  <Label for="item">Item</Label>
                    <Input
                      type="text"
                      name="name"
                      id="item"
                      placeholder="Add item"
                      onChange={this.onChange}
                    />
                    <Label for="item">Email</Label>
                    <Input
                      type="email"
                      name="email"
                      id="email"
                      placeholder="Add Your Email"
                      onChange={this.onChange}
                    />
                    <Button color="dark" style={{ marginTop: '2rem' }} block>
                      Add Item
                    </Button>
                  </FormGroup>
                </Form>
              </ModalBody>
            </Modal>
          </div>
        );
      }
    }

    const mapStateToProps = state => ({
      item: state.item,
      email: state.email
    });

    export default connect(
      mapStateToProps,
      { addItem }
    )(ItemModal);

Папка действий - типы

    export const GET_ITEMS = 'GET_ITEMS';
    export const ADD_ITEM = 'ADD_ITEM';
    export const DELETE_ITEM = 'DELETE_ITEM';
    export const ITEMS_LOADING = 'ITEMS_LOADING';

Папка действий - itemActions

import axios from 'axios';
import { GET_ITEMS, ADD_ITEM, DELETE_ITEM, ITEMS_LOADING } from './types';

export const getItems = () => dispatch => {
  dispatch(setItemsLoading());
  axios.get('/api/items').then(res =>
    dispatch({
      type: GET_ITEMS,
      payload: res.data
    })
  );
};

export const addItem = item => dispatch => {
  axios.post('/api/items', item).then(res =>
    dispatch({
      type: ADD_ITEM,
      payload: res.data
    })
  );
};

export const deleteItem = id => dispatch => {
  axios.delete(`/api/items/${id}`).then(res =>
    dispatch({
      type: DELETE_ITEM,
      payload: id
    })
  );
};

export const setItemsLoading = () => {
  return {
    type: ITEMS_LOADING
  };
};