向mongodb数据库发出删除请求并获得错误消息操作必须是普通对象。但如果我刷新存储对象将被删除。但我想实时执行。我已使用相同的方法实现获取编辑和创建请求,但使用删除时不会发生。我做错了什么。import React from“react”;
错误消息:错误代码:278操作必须是普通对象。实际类型为:您可能需要在存储设置中添加中间件来处理其他值的分派,例如“redux-thunk”来处理分派函数。
我正在将post.js按钮组件中的操作发送为onClick={()=〉dispatch(deletePost(post._id))}
const Post = ({ post, setCurrentId }) => {
const classes = useStyles();
const dispatch = useDispatch();
const editHandeler = () => {
setCurrentId(post._id);
};
return (
<Card className={classes.card}>
<CardMedia
className={classes.media}
image={
post.selectedFile ||
"https://user-images.githubusercontent.com/194400/49531010-48dad180-f8b1-11e8-8d89-1e61320e1d82.png"
}
title={post.title}
/>
<div className={classes.overlay}>
<Typography variant="h6">{post.creator}</Typography>
<Typography variant="body2">
{moment(post.createdAt).fromNow()}
</Typography>
</div>
<div className={classes.overlay2}>
<Button style={{ color: "white" }} size="small" onClick={editHandeler}>
<MoreHorizIcon fontSize="default" />
</Button>
</div>
<div className={classes.details}>
<Typography variant="body2" color="textSecondary" component="h2">
{post.tags.map((tag) => `#${tag} `)}
</Typography>
</div>
<Typography
className={classes.title}
gutterBottom
variant="h5"
component="h2"
>
{post.title}
</Typography>
<CardContent>
<Typography variant="body2" color="textSecondary" component="p">
{post.message}
</Typography>
</CardContent>
<CardActions className={classes.cardActions}>
<Button size="small" color="primary" onClick={() => {}}>
<ThumbUpAltIcon fontSize="small" /> Like {post.likeCount}{" "}
</Button>
<Button
size="small"
color="primary"
onClick={() => dispatch(deletePost(post._id))}
>
<DeleteIcon fontSize="small" /> Delete
</Button>
</CardActions>
</Card>
);
};
export default Post;
删除位置功能
export const deletePost = (id) => async (dispatch) => {
try {
await api.deletePost(id);
dispatch({ type: DELETE, payload: id });
} catch (error) {
console.log(error.message);
}
};
API
const url = "http://localhost:5000/posts";
export const fetchPosts = () => axios.get(url);
export const createPost = (newPost) => axios.post(url, newPost);
export const updatePost = (id, updatedPost) =>
axios.patch(`${url}/${id}`, updatedPost);
export const deletePost = (id) => axios.delete(`${url}/${id}`);
还原剂
import { FETCH_ALL, CREATE, UPDATE, DELETE, LIKE } from "../actions/constants";
const reducer = (posts = [], action) => {
switch (action.type) {
case FETCH_ALL:
return action.payload;
case CREATE:
return [...posts, action.payload];
case UPDATE:
return posts.map((post) =>
post._id === action.payload._id ? action.payload : post
);
case DELETE:
return posts.filter((post) => post.id !== action.payload);
default:
return posts;
}
};
export default reducer;
贮藏
import { configureStore } from "@reduxjs/toolkit";
import { reducers } from "./rootreducer";
import { applyMiddleware, compose } from "redux";
import thunk from "redux-thunk";
const store = configureStore(
{ reducer: reducers },
compose(applyMiddleware(thunk))
);
export default store;
根诱导剂
export const reducers = combineReducers({
posts: posts,
});
1条答案
按热度按时间a7qyws3x1#
configureStore
API的使用不正确。@reduxjs/toolkit
中的configureStore
API仅接受单个配置对象参数。默认情况下,
configureStore
会自动添加一些中间件到Redux存储设置中,默认情况下会添加redux-thunk
,所以不需要使用applyMiddleware
再次添加。我建议你沿着tutorials#quick-start走。