我正在尝试MERN Stack项目在表单提交中出错
Form.jsx
import React from 'react'
import useStyles from './formStyles';
import {TextField,Button,Typography,Paper} from '@material-ui/core'
import { useState } from 'react';
import FileBase from 'react-file-base64';
import {useDispatch} from 'react-redux'
import { createPost } from '../../redux/actions/posts';
const Form = () => {
const dispatch = useDispatch()
const [postData, setPostData] = useState({
creator: "",
title: "",
message: "",
tags: "",
selectedFile:""
})
const classes = useStyles();
const handleSubmit = (e) => {
e.preventDefault();
console.log('submit');
dispatch(createPost(postData))
}
const handleClear = (e) => {
e.preventDefault();
setPostData({
creator: "",
title: "",
message: "",
tags: "",
selectedFile: ""
})
}
return (
<Paper className={classes.paper}>
<form autoComplete='off' noValidate className={`${classes.form} ${classes.root}`}
onSubmit={handleSubmit}>
<Typography variant='h6'>Creating Memory</Typography>
<TextField name='creator' variant='outlined' label='Creator' fullWidth value=
{postData.creator } onChange = {(e) => setPostData({...postData, creator:
e.target.value})} />
<TextField name='title' variant='outlined' label='Title' fullWidth value=
{postData.title } onChange = {(e) => setPostData({...postData, title:
e.target.value})} />
<TextField name='message' variant='outlined' label='Message' fullWidth value=
{postData.message } onChange = {(e) => setPostData({...postData, message:
e.target.value})} />
<TextField name='tags' variant='outlined' label='Tags' fullWidth value=
{postData.tags } onChange = {(e) => setPostData({...postData, tags:
e.target.value})} />
<TextField name='selectedFile' variant='outlined' label='SelectedFile' fullWidth
value={postData.selectedFile} onChange={(e) => setPostData({ ...postData,
selectedFile: e.target.value })} />
<div className={classes.fileInput}>
<FileBase
type="file"
multiple={false}
// onDone={(err, res) => {
onDone={({base64}) => {
console.log(base64.data,'datafi' );
setPostData({ ...postData, selectedFile: base64 })
}
}
/>
</div>
<Button className={classes.buttonSubmit} variant='contained' size='large'
color='primary' fullWidth type='submit'>Submit</Button>
<Button variant='contained' color='secondary' size='small' onClick={handleClear}
fullWidth>Clear</Button>
</form>
</Paper>
)
}
export default Form
错误：
POST http://localhost:5000/posts/ 404 (Not Found)
AxiosError {message: 'Request failed with status code 404', name: 'AxiosError', code:
'ERR_BAD_REQUEST', config: {…}, request: XMLHttpRequest, …}
code: "ERR_BAD_REQUEST"
config: {transitional: {…}, transformRequest: Array(1), transformResponse: Array(1),
timeout: 0, adapter: ƒ, …}
message: "Request failed with status code 404"
name: "AxiosError"
request: XMLHttpRequest {onreadystatechange: null, readyState: 4, timeout: 0,
withCredentials: false, upload: XMLHttpRequestUpload, …}
response: {data: '<!DOCTYPE html>n<html lang="en">n<head>n<meta char…>n<pre>Cannot
POST /posts/</pre>n</body>n</html>n', status: 404, statusText: 'Not Found', headers:
{…}, config: {…}, …}
[[Prototype]]: Error
Redux:action.js
import * as api from '../../api/index'
import { CREATE_POST, FETCH_ALL } from '../actionTypes/posts'
export const getPosts = () => async (dispatch) => {
try {
const {data} = await api.getPosts();
dispatch({
type: FETCH_ALL,
payload: data
})
} catch (error) {
console.log(error.meassage);
}
// const action = { type: FETCH_ALL, payload: [] }
// dispatch(action)
}
export const createPost = (post) => async (dispatch) => {
try {
const { data } = await api.createPost(post);
dispatch({type:CREATE_POST,payload:data})
} catch (err) {
console.log(err);
}
}
Reducer.js
import { CREATE_POST, FETCH_ALL, REMOVE_POST } from "../actionTypes/posts";
const reducer = (posts = [],action) => {
switch (action.type) {
case CREATE_POST:
return [...posts,action.payload]
case REMOVE_POST:
return {
...posts
}
case FETCH_ALL:
return action.payload;
default:
return posts;
}
}
export {reducer as postsReducer};
后端：
index.js
import express from 'express';
import bodyParser from 'body-parser';
import cors from 'cors';
import mongoose from 'mongoose';
import postsRoute from './routes/posts.js';
const app = express();
app.use(cors());
app.use('/posts', postsRoute); // Gives Prefix for posts route
app.use(bodyParser.json({limit:"30mb", extended:true}));
app.use(bodyParser.urlencoded({ limit: "30mb", extended: true }));
const CONNECTION_URL = 'url of mongo db cloud database Or Atlas ';
const PORT = process.env.PORT || 5000;
mongoose.connect(CONNECTION_URL, { useNewUrlParser: true, useUnifiedTopology: true })
.then(() => app.listen(PORT, () => console.log(`Server running on port ${PORT}`)))
.catch(err => console.log(err.message));
postModule.js
import mongoose from 'mongoose';
const postSchema = mongoose.Schema({
title: String,
message: String,
creator: String,
tags: [String],
selectedFile: String,
likedCount: { type: Number, default: 0 },
createdAt: { type: Date, default: new Date() },
});
const PostMessage = mongoose.model('PostMessage', postSchema);
export default PostMessage;
在客户端包.js 中
"proxy":"http://localhost:5000",
/routes/post.js
import express from 'express';
import {getPosts,createPost} from '../controllers/post.js';
const router = express.Router();
router.get('/',getPosts);
router.post('/',createPost);
export default router;
控制器/post.js
import PostMessage from "../models/postMessage.js"
export const getPosts = async(req, res) => {
// res.status(200).send('Check Posts')
try {
const postMessage = await PostMessage.find({})
console.log(postMessage);
res.status(200).json(postMessage);
} catch (error) {
res.status(500).json({ message: error.message });
}
}
export const createPost = async(req, res) => {
// res.status(200).send('Create Post')
const post = req.body;
const newPost = new PostMessage(post);
try {
await newPost.save();
res.status(201).json(newPost);
} catch (error) {
res.status(409).json({ message: error.message });
}
}