Question

因此，正如标题所示，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" }
        })
      }
    }
  }

Answer 1

应该是这样的：

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

export default connect(mapStateToProps, mapDispatchToProps)(Cards)

然后将其称为道具：

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

组件也从另一个组件接收道具，并且该道具已连接到商店以调用动作

1 个答案: