reactjs - 组件正在从另一个组件接收道具,并连接到商店以调用操作
问题描述
因此,正如标题所示,Cards 组件正在接收来自 UserPosts 的 props,并且它连接到 store 以调度操作。但看起来这根本不起作用。连接组件对我不起作用。也许我错过了什么?有人可以告诉我正确的方法吗?我正在尝试通过单击删除按钮来删除帖子。这是代码。
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" }
})
}
}
}
解决方案
应该是这样的:
const mapDispatchToProps(dispatch) {
return bindActionCreators({ deletePost }, dispatch)
}
export default connect(mapStateToProps, mapDispatchToProps)(Cards)
然后将其称为道具:
onClick={this.props.deletePost(_id)}
推荐阅读
- regex - 如何删除字符串第一次出现之前和最后一次出现之后的所有行?
- java - 尝试捕获异常助手
- mysql - 检查与您的 MariaDB 服务器版本相对应的手册,以获取在第 1 行 sql 的 '26 ( cid int(11) not null, ' 附近使用的正确语法
- browser - 单连接浏览器
- python - 我在向我的代码添加暂停功能时遇到问题,我可以寻求帮助吗?
- react-native - 如何与烧瓶服务器(后端)通信以从反应原生前端发送信息?
- jquery - OnClick,使用 jQuery 显示带有复选框的 div
- javascript - 在 javascript 或 jquery 中向上滑动和向下滑动
- javascript - 为什么我的 iframe 没有同时加载?
- python - 尝试安装 Flask python