Reactjs 发布到我的网站时出现内部服务器错误，但在删除帖子时没有
我似乎无法弄清楚我的服务器如何无法满足post请求。当我在下面提供这个JSON时，它在postman中工作得非常好Reactjs 发布到我的网站时出现内部服务器错误，但在删除帖子时没有,reactjs,firebase,express,axios,Reactjs,Firebase,Express,Axios,我似乎无法弄清楚我的服务器如何无法满足post请求。当我在下面提供这个JSON时，它在postman中工作得非常好 { “名称”：“Post11111”， “图像”：“图像/路径”， “链接”：https://etsy.com", “信息”：“这是一幅画”， “价格”：“75”， “物品类别”：“绘画”， “可用”：“正确”， “高端”：“错误” } 但在客户端程序中使用axios发出post请求时，它返回500错误。奇怪的是，delete（和getAll）工作得很好。这是一款使用node/ex
{
“名称”：“Post11111”，
“图像”：“图像/路径”，
“链接”：https://etsy.com",
“信息”：“这是一幅画”，
“价格”：“75”，
“物品类别”：“绘画”，
“可用”：“正确”，
“高端”：“错误”
}import { SET_POSTS, LOADING_DATA, DELETE_POST, POST_PRODUCT, SET_ERRORS, CLEAR_ERRORS, LOADING_UI } from "../types";
import axios from 'axios';
//GET ALL PRODUCTS
export const getPosts = () => dispatch => {
dispatch({ type: LOADING_DATA });
axios.get('/posts')
.then(res => {
dispatch({
type: SET_POSTS,
payload: res.data
})
})
.catch(err => {
dispatch({
type: SET_POSTS,
payload: []
})
})
}
//POST PRODUCT
export const postProduct = (newPost) => (dispatch) => {
dispatch({ type: LOADING_UI });
axios.post('/post', newPost)
.then(res => {
dispatch({
type: POST_PRODUCT,
payload: res.data
})
console.log("success");
dispatch({ type: CLEAR_ERRORS })
})
.catch(err => {
dispatch({
type: SET_ERRORS,
payload: err.response.data
})
})
}
//DELETE PRODUCT
export const deletePost = (postId) => (dispatch) => {
axios.delete(`/post/${postId}`)
.then(() => {
dispatch({ type: DELETE_POST, payload: postId })
})
.catch(err => console.log(err))
}
import { SET_POSTS } from '../types';
import { LOADING_DATA, DELETE_POST, POST_PRODUCT/*, SET_POST*/ } from '../types';
const initialState = {
posts: [],
post: {},
loading: false
};
export default function(state = initialState, action){
switch(action.type){
case LOADING_DATA:
return {
...state,
loading: true
}
case SET_POSTS:
return{
...state,
posts: action.payload,
loading: false
}
case DELETE_POST:
let index = state.posts.findIndex(post => post.postId === action.payload);
state.posts.splice(index, 1);
return {
...state
}
case POST_PRODUCT:
return {
...state,
posts: [action.payload, ...state.posts]
}
default:
return state
}
}
import React, { Component, Fragment } from "react";
import { withStyles } from "@material-ui/core/styles";
import PropTypes from "prop-types";
import MyButton from "../util/MyButton";
//MUI Stuff
import Button from "@material-ui/core/Button";
import TextField from "@material-ui/core/TextField";
import Dialog from "@material-ui/core/Dialog";
import DialogTitle from "@material-ui/core/DialogTitle";
import DialogContent from "@material-ui/core/DialogContent";
import DeleteOutline from "@material-ui/icons/DeleteOutline";
import CircularProgress from '@material-ui/core/CircularProgress';
import AddIcon from '@material-ui/icons/Add';
import CloseIcon from "@material-ui/icons/Close";
//REDUX
import { connect } from "react-redux";
import { postProduct } from "../redux/actions/dataActions";
const styles = {
form: {
textAlign: "center"
},
image: {
margin: "20px auto 20px auto",
width: "50px"
},
pageTitle: {
margin: "10px auto 10px auto"
},
textField: {
margin: "10px auto 10px auto"
},
button: {
marginTop: 20,
postition: "relative"
},
customError: {
color: "red",
fontSixe: "0.8rem",
marginTop: 10
},
progress: {
position: "absolute"
},
submitButton: {
position: "relative"
},
progressSpinner: {
position: 'absolute'
},
closeButton: {
position: 'absolute',
left: '90%',
top: '10%'
}
};
class PostProduct extends Component {
state = {
open: false,
name: '',
errors: {}
};
UNSAFE_componentWillReceiveProps(nextProps){
if (nextProps.UI.errors) {
this.setState({
errors: nextProps.UI.errors
})
}
}
handleOpen = () => {
this.setState({ open: true })
}
handleClose = () => {
this.setState({ open: false })
}
handleChange = (event) => {
this.setState({ [event.target.name]: event.target.value })
}
handleSubmit = (event) => {
event.preventDefault();
this.props.postProduct({ body: this.state.body })
}
render(){
const { errors } = this.state;
const { classes, UI: {loading }} = this.props;
return (
<Fragment>
<MyButton onClick={this.handleOpen} tip="Post a Product">
<AddIcon />
</MyButton>
<Dialog
open={this.state.open}
onClose={this.handleClose}
fullWidth
maxWidth="sm"
>
<MyButton
tip="close"
onClick={this.handleClose}
tipClassName={classes.closeButton}
>
<CloseIcon />
</MyButton>
<DialogTitle>Post the new Product</DialogTitle>
<DialogContent>
<form onSubmit={this.handleSubmit}>
<TextField
name="name"
type="text"
lable="Post Product"
multiline
rows="3"
placeholder="name"
error={errors.body ? true : false}
helperText={errors.body}
className={classes.textFields}
onChange={this.handleChange}
fullWidth
/>
<TextField
name="images"
type="text"
lable="image"
multiline
rows="3"
placeholder="image"
error={errors.body ? true : false}
helperText={errors.body}
className={classes.textFields}
onChange={this.handleChange}
fullWidth
/>
<TextField
name="itemCategory"
type="text"
lable="Painting"
multiline
rows="3"
placeholder="Painting"
error={errors.body ? true : false}
helperText={errors.body}
className={classes.textFields}
onChange={this.handleChange}
fullWidth
/>
<TextField
name="link"
type="text"
lable="link"
multiline
rows="3"
placeholder="https://etsy.com"
error={errors.body ? true : false}
helperText={errors.body}
className={classes.textFields}
onChange={this.handleChange}
fullWidth
/>
<TextField
name="info"
type="text"
lable="blah blah blah"
multiline
rows="3"
placeholder="info"
error={errors.body ? true : false}
helperText={errors.body}
className={classes.textFields}
onChange={this.handleChange}
fullWidth
/>
<TextField
name="price"
type="text"
lable="Price"
multiline
rows="3"
placeholder="75.99"
error={errors.body ? true : false}
helperText={errors.body}
className={classes.textFields}
onChange={this.handleChange}
fullWidth
/>
<TextField
name="available"
type="text"
lable="available?"
multiline
rows="3"
placeholder="true"
error={errors.body ? true : false}
helperText={errors.body}
className={classes.textFields}
onChange={this.handleChange}
fullWidth
/>
<TextField
name="highEnd"
type="text"
lable="High-end or not?"
multiline
rows="3"
placeholder="false"
error={errors.body ? true : false}
helperText={errors.body}
className={classes.textFields}
onChange={this.handleChange}
fullWidth
/>
<Button
type="submit"
variant="contained"
color="primary"
className={classes.submitButton}
disabled={loading}
>
Submit
{loading && (
<CircularProgress
size={30}
className={classes.progressSpinner}
/>
)}
</Button>
</form>
</DialogContent>
</Dialog>
</Fragment>
);
}
} // END CLASS
PostProduct.propTypes = {
postProduct: PropTypes.func.isRequired,
UI: PropTypes.object.isRequired
}
const mapStateToProps = (state) => ({
UI: state.UI
})
export default connect(mapStateToProps, { postProduct })(withStyles(styles)(PostProduct))
import React，{Component，Fragment}来自“React”；
从“@material ui/core/styles”导入{withStyles}”；
从“道具类型”导入道具类型；
从“./util/MyButton”导入MyButton；
//梅的东西
从“@物料界面/核心/按钮”导入按钮；
从“@material ui/core/TextField”导入TextField；
从“@material ui/core/Dialog”导入对话框；
从“@material ui/core/DialogTitle”导入DialogTitle；
从“@material ui/core/DialogContent”导入DialogContent；
从“@material ui/icons/DeleteOutline”导入DeleteOutline；
从“@material ui/core/CircularProgress”导入CircularProgress；
从“@material ui/icons/Add”导入AddIcon；
从“@material ui/icons/Close”导入CloseIcon；
//重演
从“react redux”导入{connect}；
从“./redux/actions/dataActions”导入{postProduct}”；
常量样式={
表格：{
textAlign：“居中”
},
图片：{
保证金：“20px自动20px自动”，
宽度：“50px”
},
页面标题：{
保证金：“10px自动10px自动”
},
文本字段：{
保证金：“10px自动10px自动”
},
按钮：{
玛金托普：20，
职位：“亲戚”
},
自定义错误：{
颜色：“红色”，
fontSixe：“0.8雷姆”，
玛金托普：10
},
进展：{
位置：“绝对”
},
提交按钮：{
职位：“相对”
},
progressSpinner：{
位置：'绝对'
},
关闭按钮：{
位置：'绝对'，
左：“90%”，
前几名：“10%”
}
};
类PostProduct扩展组件{
状态={
开：错，
名称：“”，
错误：{}
};
不安全组件将接收道具（下一步）{
if（nextrops.UI.errors）{
这是我的国家({
错误：nextrops.UI.errors
})
}
}
handleOpen=（）=>{
this.setState（{open:true}）
}
handleClose=（）=>{
this.setState（{open:false}）
}
handleChange=（事件）=>{
this.setState（{[event.target.name]：event.target.value}）
}
handleSubmit=（事件）=>{
event.preventDefault（）；
this.props.postProduct（{body:this.state.body}）
}
render（）{
const{errors}=this.state；
const{classes，UI:{loading}}=this.props；
返回(
后端在这里：
谢谢你的帮助。我知道这是个大问题
谢谢jfriend00
谢谢，我已经克服了这个错误。我没有列出我想要的对象属性，而是在我的请求中使用了“body:this.state.body”。我实际上需要整个JSON内容
现在我遇到了一个问题，我实际上没有将任何提交的信息输入到正在创建的卡中。如果您在上面看到任何信息，请告诉我
出现了一些错误
index.js:1375 Material-UI: either `children`, `image` or `src` prop must be specified.
in CardMedia (created by WithStyles(ForwardRef(CardMedia)))
in WithStyles(ForwardRef(CardMedia)) (at Post.js:55)
in Post (created by WithStyles(Post))
in WithStyles(Post) (created by Connect(WithStyles(Post)))
in Connect(WithStyles(Post)) (at products.jsx:18)
in products (created by Connect(products))
in Connect(products) (created by Router.Consumer)
in Router.Consumer (created by Route)
in Route (at App.js:44)
in App (at src/index.js:6)
console.<computed> @ index.js:1375
r @ backend.js:6
CardMedia @ CardMedia.js:41
renderWithHooks @ react-dom.development.js:16295
updateForwardRef @ react-dom.development.js:18145
beginWork$1 @ react-dom.development.js:20170
beginWork$$1 @ react-dom.development.js:25699
performUnitOfWork @ react-dom.development.js:24646
workLoopSync @ react-dom.development.js:24622
performSyncWorkOnRoot @ react-dom.development.js:24211
(anonymous) @ react-dom.development.js:12263
unstable_runWithPriority @ scheduler.development.js:821
runWithPriority$2 @ react-dom.development.js:12209
flushSyncCallbackQueueImpl @ react-dom.development.js:12258
flushSyncCallbackQueue @ react-dom.development.js:12246
batchedUpdates$1 @ react-dom.development.js:24332
notify @ Subscription.js:23
notifyNestedSubs @ Subscription.js:65
handleChangeWrapper @ Subscription.js:70
dispatch @ redux.js:221
e @ VM889:1
(anonymous) @ index.js:11
dispatch @ redux.js:638
(anonymous) @ dataActions.js:25
Promise.then (async)
(anonymous) @ dataActions.js:23
(anonymous) @ index.js:8
(anonymous) @ redux.js:476
PostProduct.handleSubmit @ PostProduct.js:83
callCallback @ react-dom.development.js:337
invokeGuardedCallbackDev @ react-dom.development.js:386
invokeGuardedCallback @ react-dom.development.js:439
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:454
executeDispatch @ react-dom.development.js:585
executeDispatchesInOrder @ react-dom.development.js:610
executeDispatchesAndRelease @ react-dom.development.js:713
executeDispatchesAndReleaseTopLevel @ react-dom.development.js:722
forEachAccumulated @ react-dom.development.js:694
runEventsInBatch @ react-dom.development.js:739
runExtractedPluginEventsInBatch @ react-dom.development.js:881
handleTopLevel @ react-dom.development.js:5834
batchedEventUpdates$1 @ react-dom.development.js:24342
batchedEventUpdates @ react-dom.development.js:1417
dispatchEventForPluginEventSystem @ react-dom.development.js:5930
attemptToDispatchEvent @ react-dom.development.js:6047
dispatchEvent @ react-dom.development.js:5950
unstable_runWithPriority @ scheduler.development.js:821
runWithPriority$2 @ react-dom.development.js:12209
discreteUpdates$1 @ react-dom.development.js:24359
discreteUpdates @ react-dom.development.js:1442
dispatchDiscreteEvent @ react-dom.development.js:5917
index.js:1375 Warning: Failed prop type: The prop `postId` is marked as required in `DeletePost`, but its value is `undefined`.
in DeletePost (created by WithStyles(DeletePost))
in WithStyles(DeletePost) (created by ConnectFunction)
in ConnectFunction (at Post.js:51)
in div (created by ForwardRef(CardContent))
in ForwardRef(CardContent) (created by WithStyles(ForwardRef(CardContent)))
in WithStyles(ForwardRef(CardContent)) (at Post.js:60)
in div (created by ForwardRef(Paper))
in ForwardRef(Paper) (created by WithStyles(ForwardRef(Paper)))
in WithStyles(ForwardRef(Paper)) (created by ForwardRef(Card))
in ForwardRef(Card) (created by WithStyles(ForwardRef(Card)))
in WithStyles(ForwardRef(Card)) (at Post.js:54)
in Post (created by WithStyles(Post))
in WithStyles(Post) (created by ConnectFunction)
in ConnectFunction (at products.jsx:18)
in div (created by ForwardRef(Grid))
in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
in WithStyles(ForwardRef(Grid)) (at products.jsx:22)
in div (created by ForwardRef(Grid))
in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
in WithStyles(ForwardRef(Grid)) (at products.jsx:21)
in products (created by ConnectFunction)
in ConnectFunction (created by Context.Consumer)
in Route (at App.js:44)
in Switch (at App.js:42)
in div (at App.js:41)
in Router (created by BrowserRouter)
in BrowserRouter (at App.js:39)
in Provider (at App.js:38)
in ThemeProvider (at App.js:37)
in App (at src/index.js:6)
index.js:1375材质UI:必须指定'children'、'image'或'src'属性。
在CardMedia中（由WithStyles（ForwardRef（CardMedia））创建）
在WithStyles（ForwardRef（CardMedia））（Post.js:55）
在Post中（由WithStyles（Post）创建）
在WithStyles（Post）中（由Connect（WithStyles（Post））创建）
in Connect（使用样式（Post））（at products.jsx:18）
在产品中（由Connect（产品）创建）
in Connect（产品）（由Router.Consumer创建）
路由器中的消费者（由路由创建）
途中（见App.js:44）
应用程序内（在src/索引js:6）
控制台。@index.js:1375
r@backend.js:6
CardMedia@CardMedia.js:41
renderWithHooks@react dom.development.js:16295
updateForwardRef@react dom.development.js:18145
beginWork$1@react dom.development.js:20170
beginWork$$1@react dom.development.js:25699
performUnitOfWork@react dom.development.js:24646
workLoopSync@react dom.development.js:24622
performsyncworkroot@react dom.development.js:24211
（匿名）@react dom.development.js:12263
不稳定\u runWithPriority@scheduler.development.js:821
runWithPriority$2@react dom.development.js:12209
flushSyncCallbackQueueImpl@react dom.development.js:12258
flushSyncCallbackQueue@react dom.development.js:12246
BatchedUpdate$1@react dom.development.js:24332
通知@Subscription.js:23
notifyNestedSubs@Subscription.js:65
handleChangeWrapper@Subscription.js:70
dispatch@redux.js:221
e@VM889:1
（匿名）@index.js:11
dispatch@redux.js:638
（匿名）@dataActions.js:25
Promise.then（异步）
（匿名）@dataActions.js:23
（匿名）@index.js:8
（匿名）@redux.js:476
PostProduct.handleSubmit@PostProduct.js:83
callCallback@react dom.development.js:337
invokeGuardedCallbackDev@react dom.development.js:386
invokeGuardedCallback@react dom.development.js:439
invokeGuardedCallbackAndCatchFirstError@react dom.development.js:454
executeDispatch@react dom.development.js:585
executeDispatchesInoder@react dom.development.js:610
executeDispatchesAndRelease@react dom.development.js:713
executeDispatchesAndReleaseTopLevel@react dom.development.js:722
foreach@react dom.development.js:694
runEventsInBatch@react dom.development.js:739
runExtractedPluginEventsInBatch@react dom.development.js:881
汉德尔
this.props.postProduct({ body: this.state.body })
{
"name": "post11111111111",
"images": "image/path",
"link": "https://etsy.com",
"info": "this is a painting",
"price": "75",
"itemCategory": "painting",
"available": "true",
"highEnd": "false"
}