Я пытаюсь удалить сообщение, но, похоже, мне приходится каждый раз обновлять sh страницу. Магазин также обновляется после refre sh, когда я смотрю на React devtools в Chrome. Мне нужно понять причину этого.
Итак, у меня есть UserPosts компонент на маршруте, такой как www.abc.com/profile/jimmy/posts. Эта страница содержит сообщения пользователя в виде карточек. У них также есть кнопка удаления.
UserPosts. js
import React, { Component } from "react"
import { getUserPosts, getCurrentUser } from "../actions/userActions"
import { connect } from "react-redux"
import Cards from "./Cards"
class UserPosts extends Component {
componentDidMount() {
const authToken = localStorage.getItem("authToken")
if (authToken) {
this.props.dispatch(getCurrentUser(authToken))
if (this.props && this.props.userId) {
this.props.dispatch(getUserPosts(this.props.userId))
} else {
return null
}
}
}
render() {
const { isFetchingUserPosts, userPosts } = this.props
console.log(userPosts)
return isFetchingUserPosts ? (
<p>Fetching....</p>
) : (
<div>
{userPosts &&
userPosts.map(post => {
return <Cards key={post._id} post={post} />
})}
</div>
)
}
}
const mapStateToPros = state => {
return {
isFetchingUserPosts: state.userPosts.isFetchingUserPosts,
userPosts: state.userPosts.userPosts,
userId: state.auth.user._id
}
}
export default connect(mapStateToPros)(UserPosts)
Карты. js
import React, { Component } from "react"
import { connect } from "react-redux"
import { deletePost } from "../actions/userActions"
class Cards extends Component {
handleDelete = (_id) => {
this.props.dispatch(deletePost(_id))
}
render() {
const { _id, title, description } = this.props.post
return (
<div className="card">
<div className="card-content">
<div className="media">
<div className="media-left">
<figure className="image is-48x48">
<img
src="https://bulma.io/images/placeholders/96x96.png"
alt="Placeholder image"
/>
</figure>
</div>
<div className="media-content" style={{border: "1px grey"}}>
<p className="title is-5">{title}</p>
<p className="content">{description}</p>
<button className="button is-success">Edit</button>
<button onClick={() => {this.handleDelete(_id)}} className="button is-success">Delete</button>
</div>
</div>
</div>
</div>
)
}
}
const mapStateToProps = () => {
return {
nothing: "nothing"
}
}
export default connect(mapStateToProps)(Cards)
deletePost действие
export const deletePost = (id) => {
return async (dispatch) => {
dispatch({ type: "DELETING_POST_START" })
try {
const deletedPost = await axios.delete(`http://localhost:3000/api/v1/posts/${id}/delete`)
dispatch({
type: "DELETING_POST_SUCCESS",
data: deletedPost
})
} catch(error) {
dispatch({
type: "DELETING_POST_FAILURE",
data: { error: "Something went wrong" }
})
}
}
}
редуктор userPosts
const initialState = {
isFetchingUserPosts: null,
isFetchedUserPosts: null,
userPosts: [],
fetchingUserPostsError: null
}
const userPosts = (state = initialState, action) => {
switch (action.type) {
case "FETCHING_USER_POSTS_START":
return {
...state,
isFetchingUserPosts: true,
fetchingUserPostsError: null
}
case "FETCHING_USER_POSTS_SUCCESS":
return {
...state,
isFetchingUserPosts: false,
isFetchedUserPosts: true,
userPosts: action.data,
fetchingUserPostsError: null
}
case "FETCHING_USER_POSTS_ERROR":
return {
...state,
isFetchingUserPosts: false,
isFetchedUserPosts: false,
fetchingUserPostsError: action.data.error
}
default:
return state
}
}
export default userPosts
пост редуктор
const initialState = {
isAddingPost: false,
postError: null,
post: {},
isFetchingPosts: null,
isFetchedPosts: null,
fetchingPostsError: null,
isDeletingPost: false,
isDeletedPost: false,
deletingError: null,
postList: []
}
const post = (state = initialState, action) => {
switch (action.type) {
case "ADD_POST_STARTS":
return { ...state, isAddingPost: true, postError: null }
case "ADD_POST_SUCCESS":
return {
...state,
isAddingPost: false,
postError: null,
post: action.data
}
case "ADD_POST_ERROR":
return {
...state,
isAddingPost: false,
postError: action.data.error,
post: {}
}
case "FETCHING_POSTS_START":
return {
...state,
isFetchingPosts: true,
isFetchedPosts: false,
fetchingPostsError: null
}
case "FETCHING_POSTS_SUCCESS":
return {
...state,
isFetchingPosts: false,
isFetchedPosts: true,
fetchingPostsError: null,
postList: action.data.posts
}
case "FETCHING_POSTS_ERROR":
return {
...state,
isFetchingPosts: false,
isFetchedPosts: false,
fetchingPostsError: action.data.error
}
case "DELETING_POST_START":
return {
...state,
isDeletingPost: true,
deletingError: null
}
case "DELETING_POST_SUCCESS":
const filteredPostList = state.postList.filter(
post => post._id !== action.data._id
)
return {
...state,
isDeletingPost: false,
isDeletedPost: true,
postList: filteredPostList,
deletingError: null
}
case "DELETING_POST_ERROR":
return {
...state,
isDeletingPost: false,
deletingError: action.data.error
}
default:
return state
}
}
export default post
Мне просто нужно знать, как решить эту проблему и почему это происходит не так, как ожидалось. Спасибо.
РЕДАКТИРОВАТЬ: У меня также есть deletePost контроллер. Это вызывает проблему?
router.delete("/:id/delete", postsController.deletePost)
deletePost: async (req, res, next) => {
try {
const post = await Post.findByIdAndDelete(req.params.id)
if (!post) {
return res.status(200).json({ error: "No post found"})
}
return res.status(200).json({ post })
} catch(error) {
return res.json({ error })
}
}