Блог

Я делаю небольшой проект в React, Mongoose и Expressjs, и когда я нажимаю отправить в форме, ничего не происходит. Я также получаю эту ошибку на своем экспресс-сервере:

{ описание: {Ошибка проверки: description требуется путь.

Компонент блога:

 import React, { Component } from 'react'
import { Link } from '@reach/router'
import { getBlogs } from '../Api.jsx'
import AddBlog from '../components/AddBlog.jsx'


export default class Blog extends Component {
  state = {
    blogs: []
  }

  componentDidMount() {
    getBlogs()
      .then(res => {
          // console.log(res.data)
          this.setState({blogs: res.data})
      })
      .catch(err => {
          console.log(err)
      })
  }
  
  newPostedBlog = addedNewBlog => {
    this.setState(currentState => {
      return {
        blogs: [addedNewBlog, ...currentState.blogs]
      };
    });
  };
  
  render() {
      const {blogs} = this.state;
        return (
      <div className="blog-container">
        <Link to={`/blog/new`}>
        <button className="create-blog-button">Create new blog</button>
        </Link>
          <p className="blog-header">Blogs</p>
            <ul className="blog-ul">
             {blogs.map((blog) => (
               <li key={blog._id}>
                 <Link to={`/blog/${blog._id}`} className="link-to-single-blog">
                 <div className="blog-title">{new Date(blog.title).toLocaleDateString()}</div>
                 </Link>
                 <div className="blog-description">{blog.description}</div>
                 <div className="diary-btn-container">
                 <button className='diary-btn' onClick={this.handleClick}> Diary </button>
                 </div>
               </li>
            ))}
          </ul> 
      </div>
    )
  }
}
 

Компонент AddBlog:

 import React, { Component } from 'react';
import { postBlog } from '../Api.jsx';

export default class AddBlog extends Component {
  state = {
    description: ""
  }
  
  handleChange = event => {
    event.preventDefault()
    console.log(event.target.value)
    this.setState({ description: event.target.value})

  }
  
  handleSubmit = event => {
    event.preventDefault();
    const { description } = this.state;
    const { newPostedBlog } = this.props;
    postBlog(description).then(newBlog => {
      newPostedBlog(newBlog)
      this.setState({description: ""})
    })
  }

  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <label>
            <div className="description-box-container">
            <textarea onChange={this.handleChange}
                      placeholder="Say what's on your mind..." 
                      className="description-box"
                      rows="30"
                      cols="120"
                      type="text"
                      id="body"
                      value={this.state.description}>
            </textarea>
            </div>
            
          </label>
          <div className="submit-thoughts-btn-container">
          <button type='submit' className="submit-thoughts-btn"> Submit your thoughts! </button>
          </div>
        </form>
      </div>
    )    
  }
}
 

Серверный POST-контроллер:

 exports.postBlog = (req, res) => {
    const newBlog = new Blog();
    newBlog.description = req.body.description;
    
    newBlog.save().then(newBlog => {
        res.send(newBlog)
    }).catch(err => {
        console.log(err)
    })
}
 

Модель блога:

     const mongoose = require('mongoose')
    const Schema = mongoose.Schema;
    //npm package to force unique key as mongoose doesn't provide this
    const uniqueValidator = require('mongoose-unique-validator');
    
    // schema to define key types for blog schema
    const blogsSchema = new Schema({
        
        title: {
            
           type: Date,
           required: true,
           default: Date.now,
           unique: true
       
        },
        
        description: {
            
            type: String,
            required: true,
            unique: true
        }
})
    
 

Api.jsx:

 export const postBlog = (id, title, description) => {
  const baseURL = 'https://f2f1c0aaf7de41d4bc57354de1d10938.vfs.cloud9.eu-west-1.amazonaws.com/blog/new'
  return axios.post(baseURL, { title, description}).then(res => {
    return res.data.blog;
  })
}
 

Любая помощь приветствуется. Извините, если я что-то пропустил, дайте мне знать. 🙂 Спасибо.

В вашей функции отправки вы вызываете postBlog(description) один параметр, однако в определении вашей postBlog функции в Api.jsx вы получаете 3 параметра, из-за чего 2-й и 3-й параметры не определены, следовательно description , не определены, когда вы передаете его в свой post.

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

PS имейте в виду, что title это также требуется в соответствии с вашей Blog моделью, и в вашей текущей реализации вы title также передаете undefined for .