Компонент получает реквизит от другого компонента, а также подключен к хранилищу, чтобы вызвать действие - PullRequest
Новая
       6

Компонент получает реквизит от другого компонента, а также подключен к хранилищу, чтобы вызвать действие

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

Итак, как следует из заголовка, компонент Cards получает реквизиты от UserPosts, а также подключается к хранилищу для отправки действия. Но похоже, что это не работает вообще. Подключение компонента не работает для меня. Может я что-то упустил? Может кто-нибудь показать мне правильный способ сделать это. Я пытаюсь удалить сообщение, нажав на кнопку удаления. Вот код:

UserPosts

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() {
    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)(UserFeed)

Cards

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

class Cards extends Component {
  handleDelete = postId => {
    this.props.dispatch(deletePost(postId))
  }

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

1 Ответ

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

Должно быть что-то вроде этого: 

const mapDispatchToProps(dispatch) {
  return bindActionCreators({ deletePost }, dispatch)
}

export default connect(mapStateToProps, mapDispatchToProps)(Cards)

А затем назовите его как опору: 

onClick={this.props.deletePost(_id)}
...