我目前正在接受Udemy的Redux课程的现代反应。
在 posts_show 组件上,我可以从uri的react-router的params对象获取id,如下所示。
import React, { Component } from 'react';
import {connect} from 'react-redux';
import {fetchPost, deletePost } from "../actions/index";
import { Link } from 'react-router-dom';
class PostsShow extends Component {
componentDidMount() {
// if (!this.props.post) { if we don't have it go and grab that thing}
const { id } = this.props.match.params;
this.props.fetchPost(id);
}
onDeleteClick() {
const { id } = this.props.match.params;
this.props.deletePost(id, () => {
this.props.history.push('/');
});
}
render() {
const { post } = this.props;
if(!post) { // BEFORE THE DATA IS LOADED, WE SHOULD RETURN (RENDER) ANOTHER THING.
return <div>Loading...</div>
}
return (
<div>
<Link to="/" className="btn btn-primary">Back to Index</Link>
<button
className="btn btn-danger pull-xs-right"
onClick={this.onDeleteClick.bind(this)}
>
Delete Post
</button>
<h3>{post.title}</h3>
<h6>Categories: {post.categories}</h6>
<p>{post.content}</p>
</div>
);
}
}
function mapStateToProps({ posts }, ownProps) { // (application state, ownProps)
return { post: posts[ownProps.match.params.id] };
}
export default connect(mapStateToProps, { fetchPost, deletePost })(PostsShow);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
以下是动作创建者:
export function deletePost(id, callback) {
const request = axios.delete(`${ROOT_URL}/posts/${id}${API_KEY}`)
.then(() => callback());
return {
type: DELETE_POST,
payload: id
}
}
这是减速器:
export default function(state = {}, action) {
switch (action.type) {
case DELETE_POST:
return _.omit(state, action.payload);
现在我想为 posts_index组件添加相同的功能。 我想为每个列表项添加“删除帖子”按钮。我假设可以为任务使用相同的action_creator和reducer,但是我无法访问单个列表项的id属性并将其传递给posts_index组件上的onDeleteClick函数。
如果有人能帮我解决这个问题,我将不胜感激。 提前谢谢。
import React, { Component } from 'react';
import { connect } from 'react-redux';
import {fetchPosts, deletePost} from "../actions/index";
import _ from 'lodash';
import { Link } from 'react-router-dom';
class PostsIndex extends React.Component {
componentDidMount() {
this.props.fetchPosts();
}
onDeleteClick() {
console.log(this.props.posts);
alert('clicked');
}
renderPosts() {
return _.map(this.props.posts, post => {
return <li className="list-group-item" key={post.id}>
<Link to={`/posts/${post.id}`}>
{post.title}
</Link>
<button
className="btn btn-danger pull-xs-right"
onClick={this.onDeleteClick.bind(this)}
>Delete {post.id}
</button>
</li>
})
}
render() {
// console.log(this.props.posts);
return (
<div>
<div className="text-xs-right">
<Link className="btn btn-primary" to="/posts/new">
Add a Post
</Link>
</div>
<h3>Posts</h3>
<ul className="list-group">
{this.renderPosts()}
</ul>
</div>
);
}
}
function mapStateToProps(state) {
return { posts: state.posts };
}
export default connect(mapStateToProps, { fetchPosts, deletePost })(PostsIndex);
答案 0 :(得分:1)
将onClick更改为
onClick={() => this.onDeleteClick(post.id)}
答案 1 :(得分:0)
好的,我明白了,谢谢你的帮助!
onDeleteClick(id) {
this.props.deletePost(id, () => {
this.props.history.push('/');
});
}
renderPosts() {
return _.map(this.props.posts, post => {
return <li className="list-group-item" key={post.id}>
<Link to={`/posts/${post.id}`}>
{post.title}
</Link>
<button
className="btn btn-danger pull-xs-right"
onClick={() => this.onDeleteClick(post.id)}
>Delete {post.id}
</button>
</li>
})
}