Блог

Я работаю с MERN и пытаюсь сохранить входные значения параметра выбора в моей базе данных MongoDB с помощью mongoose. Вот так

 import React, {Component} from 'react';
import axios from 'axios';

class Admin extends Component {
    constructor(props) {
        super(props)

        //setting initial states
        this.state= {
            college: ''
        }
    }

onChangeCollege=(event)=>{
        this.setState({college: event.target.value})
    }

 onSubmit =(event) =>{
        event.preventDefault()

        console.log('Form Submitted')

        const newCourse = {
            college:this.state.college
        }

        axios.post('http://localhost:8000/courses/admin', newCourse)
            .then(response => console.log(response.data))
            .catch(() => console.log('Error creating new course'))

        this.setState({
            college: ''
                    })
    }

   

    render(){
        
    return (
        <div className="space3">
            <h3>Add a Course to the Database</h3>
        <form autoComplete="on" onSubmit={this.onSubmit} className="space"> 
            <div className="form-group">
                 <label htmlFor="exampleInputEmail1">COLLEGE</label>
                     <select className="custom-select" id="inputGroupSelect01" >
                        <option defaultValue>Choose...</option>
                        <option value={this.state.college} onChange={this.onChangeCollege} > College of 
 Agricultural and Environmental Sciences </option>
                        <option value={this.state.college} onChange={this.onChangeCollege} > College of Humanities and Social Sciences </option>
                        <option value={this.state.college} onChange={this.onChangeCollege} > College of Education and External Studies </option>
                        <option value={this.state.college} onChange={this.onChangeCollege} > College of Health Sciences </option>
                        <option value={this.state.college} onChange={this.onChangeCollege} > College of Natural Sciences </option>
                        <option value={this.state.college} onChange={this.onChangeCollege} > College of Business and Management Studies </option>
                        <option value={this.state.college} onChange={this.onChangeCollege} > College of Engineering, Design,  Art and Technology </option>
                        <option value={this.state.college} onChange={this.onChangeCollege} > College of Veterinary Medicine, Animal Resources and Bio-Security </option>
                        <option value={this.state.college} onChange={this.onChangeCollege} > School of Law </option>
                    </select>
 </div>
<button type="submit" className="btn btn-primary">Submit</button>

            </form>
            </div>
    )
    }
}

export default Admin;
  

мой серверный сервер — Nodejs, который выглядит следующим образом.
МОДЕЛЬ

 const mongoose = require('mongoose')

const Courses = new mongoose.Schema({
    college: {
        type:String
    }  
})

module.exports = mongoose.model('coursesmodel', Courses)
  

API

 const express = require ('express')
const router = express.Router()
const coursedb = require('../models/coursedb')

//add new todo to list
router.post('/admin', (request, response) => {
    const list = new coursedb({
        college: request.body.college
    })

    list.save()
    .then(courses => {response.json(courses)})
    .catch(error => {response.json(error)})
})
 
module.exports = router
  

Как вы можете видеть в моей консоли, это последняя консоль.журнал возвращает пустую строку для значения КОЛЛЕДЖА.

И вот как это выглядит в моем MongoDB.

Как мне сохранить этот параметр выбора ввода КОЛЛЕДЖА в моей БД в виде строки, как и остальные, а не пустой строки. Нужна помощь!

В состоянии college это пустая строка, а в коде JSX value для каждого параметра есть this.state.college , т.Е. Пустая строка, и в этом заключается ваша проблема.

Всякий onChangeCollege() раз, когда срабатывает, event.target.value это значение value атрибута option элемента, который вызвал onChange событие, и в вашем случае this.state.college это пустая строка, и это то, что вы отправляете на сервер при отправке формы.

value атрибут option элемента должен быть равен значению параметра, который виден пользователю. Например, вам нужно изменить

 <option
  value={this.state.college}
  onChange={this.onChangeCollege}
>
  College of Humanities and Social Sciences
</option>
  

Для

 <option
  value="College of Humanities and Social Sciences"
  onChange={this.onChangeCollege}
>
  College of Humanities and Social Sciences
</option>
  

Вам нужно сделать это для всех option элементов.

Примечание: вам не нужно добавлять отдельный onChange прослушиватель для каждого option , добавление onChange прослушивателя событий для select элемента приведет к тому же результату.

 <select
  className="custom-select"
  id="inputGroupSelect01"
  onChange={this.onChangeCollege} 
>
  ...
</select>
  

Если вы хотите знать, почему это работает, см.: MDN - Event Bubbling