Удаление данных напрямую, без обновления компонента в реагируйте - PullRequest
Новая
       6

Удаление данных напрямую, без обновления компонента в реагируйте

0 голосов
/ 31 марта 2020

Я пытаюсь удалить сообщение, но, похоже, мне приходится каждый раз обновлять 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
    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 action 

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" }
        })
      }
    }
  }

постредуктор 

const initialState = {
    isDeletingPost: false,
    isDeletedPost: false,
    deletingError: null,
    postList: []
}


export const post = (state=initialState, action) => {
    switch(action.type) {
        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
    }
}

Мне просто нужно знать, как решить эту проблему и почему это происходит не так, как ожидалось. Спасибо.

РЕДАКТИРОВАТЬ : У меня есть два редуктора. Пожалуйста, игнорируйте вышесказанное. Вот редукторы https://hastebin.com/koqijinabi.coffeescript.

1 Ответ

0 голосов
/ 31 марта 2020

Похоже, ваш mapState неверен: 

const mapStateToPros = state => {
  return {
    isFetchingUserPosts: state.userPosts.isFetchingUserPosts,
    userPosts: state.userPosts.userPosts,
    userId: state.auth.user._id
  }
}

Состояние ваших сообщений выглядит следующим образом: 

const initialState = {
    isDeletingPost: false,
    isDeletedPost: false,
    deletingError: null,
    postList: []
}

У вас нет .isFetchingUserPosts или .userPosts в там. У вас do есть isDeletingPost и .postList.

Исправьте ваш mapState так, чтобы он соответствовал фактическим именам полей в вашем штате, и это должно работать.

...