Question

我目前正在接受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);

Answer 1

将onClick更改为

onClick={() => this.onDeleteClick(post.id)}

Answer 2

好的，我明白了，谢谢你的帮助！

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

如何使用React＆amp; amp;在列表项上添加“删除帖子”功能终极版？

2 个答案: