मुझे अपने ऐप में पोस्ट को हटाने में कुछ समस्याएं आ रही हैं। तो, पोस्ट को हटाने के बाद, राज्य को अपडेट करना चाहिए और घटक को फिर से प्रस्तुत करना चाहिए, है ना? तो, मेरी पोस्ट को हटाने के बाद, घटक उसी डेटा के साथ फिर से प्रस्तुत करता है। अगर मैं रीफ्रेश करता हूं, तो पृष्ठ पर केवल अद्यतन डेटा दिखाया जाता है। उदाहरण के लिए, यदि मेरे पास एक पोस्ट को हटाते समय मेरे ऐप में 3 पोस्ट हैं, तो घटक फिर से प्रस्तुत करता है, लेकिन फिर भी यह 3 पोस्ट दिखाता है। मुझे नहीं पता ऐसा क्यों हो रहा है।

यहाँ मेरा कोड है।

UserFeed

import React, { Component } from "react"
import { getUserPosts, getCurrentUser } from "../actions/userActions"
import { connect } from "react-redux"
import Cards from "./Cards"

class UserFeed 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() {
    console.log("render called")
    const { isFetchingUserPosts, userPosts } = this.props
    console.log(isFetchingUserPosts, 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.userPosts,
    userId: state.auth.user._id
  }
}

export default connect(mapStateToPros)(UserFeed)

Cards

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 onClick={() => {this.handleDelete(_id)}} className="button is-success">Delete</button>
            </div>
          </div>
        </div>
      </div>
    )
  }
}


const mapStateToProps = state => {
  return state
}

export default compose(withRouter, connect(mapStateToProps))(Cards)

deletePost कार्रवाई

export const deletePost = (id) => {
  return async dispatch => {
    dispatch({ type: "DELETING_POST_START" })
    try {
      const res = await axios.delete(`http://localhost:3000/api/v1/posts/${id}/delete`)
      dispatch({
        type: "DELETING_POST_SUCCESS",
        data: res.data
      })
    } catch(error) {
      dispatch({
        type: "DELETING_POST_FAILURE",
        data: { error: "Something went wrong" }
      })
    }
  }
}

userPosts रेड्यूसर

const initialState = {
    isFetchingUserPosts: null,
    isFetchedUserPosts: null,
    userPosts: [],
    fetchingUserPostsError: null,
    isDeletingPost: false,
    isDeletedPost: false,
    deletingError: false,
  }

  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,
        }
      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,
          userPosts: filteredPostList,
          deletingError: null,
        }
      case "DELETING_POST_ERROR":
        return {
          ...state,
          isDeletingPost: false,
          deletingError: action.data.error,
        }
      default:
        return state
    }
  }

  export default userPosts
0
ubuntu7788 6 अप्रैल 2020, 10:15
शायद कनेक्ट नहीं है लेकिन आपके पास दो मामले समान हैं: 'DELETING_POST_ERROR'
 – 
rrd
6 अप्रैल 2020, 10:17
आपके पास यहां 3 डिलीटिंग पोस्ट हैं, और एक एरे से पोस्ट को डिलीट कर रहा है। आप यहां किसको कॉल करने का प्रयास कर रहे हैं? क्या आप हटाए गए एपीआई को कॉल करना चाहते हैं और फिर उस प्रतिक्रिया को हटाए गए डेटा के साथ प्रदर्शित करना चाहते हैं। या आप केवल हटाए गए डेटा के साथ सरणी को फ़िल्टर करना चाहते हैं?
 – 
Thanveer Shah
6 अप्रैल 2020, 10:20
मैं पदों की एक फ़िल्टर की गई सरणी प्रदर्शित करना चाहता हूं। @ थनवीर शाह। मेरा मतलब है मामला DELETING_POST_SUCCESS। वहीं फिल्टरिंग हो रही है। इसलिए, जब मैं पोस्ट हटाता हूं, filteredPostList अपडेट हो जाता है। यही मैं UserFeed घटक में उपयोग करने का प्रयास कर रहा हूं। लेकिन यह घटक में अद्यतन सरणी नहीं दिखा रहा है।
 – 
ubuntu7788
6 अप्रैल 2020, 10:41
क्षमा करें, मैंने यहां कोड कॉपी और पेस्ट करने में गड़बड़ी की है। इसे अब ठीक किया।
 – 
ubuntu7788
6 अप्रैल 2020, 10:42
लेकिन मुझे State.postList.filter क्यों नहीं मिल रहा है। यह पोस्ट कहीं और सूचीबद्ध है? क्या आपको वहां यूजरपोस्ट को कॉल नहीं करना चाहिए?
 – 
Thanveer Shah
6 अप्रैल 2020, 10:51

1 उत्तर

डिलीट पोस्ट एक्शन को सफलता मिलने पर id को रिड्यूसर पर भेजना होगा।

पोस्ट कार्रवाई हटाएं

export const deletePost = (id) => {
  return async dispatch => {
    dispatch({ type: "DELETING_POST_START" })
    try {
      const res = await axios.delete(`http://localhost:3000/api/v1/posts/${id}/delete`)
      dispatch({
        type: "DELETING_POST_SUCCESS",
        data: res.data,
        id
      })
    } catch(error) {
      dispatch({
        type: "DELETING_POST_FAILURE",
        data: { error: "Something went wrong" }
      })
    }
  }
}

उपयोगकर्ता पोस्ट रिड्यूसर में action.id तक पहुंचें

case "DELETING_POST_SUCCESS":
  return {
    ...state,
    isDeletingPost: false,
    isDeletedPost: true,
    userPosts: state.postList.filter(post => post._id !== action.id),
    deletingError: null,
  }
0
Drew Reese 6 अप्रैल 2020, 11:20
नहीं, यह वही है। मुझे लगता है कि post._id अपरिभाषित है, इसलिए कुछ नहीं हो रहा है।
 – 
ubuntu7788
6 अप्रैल 2020, 11:35