如何使用React和Redux在列表項上添加'刪除發佈'功能？

Question

我目前正在從Udemy採用Redux的Modern React課程。

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

，這裏是減速機：

現在

我想補充相同的功能爲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> 
 
     }) 
 
    }