React＆Reduxを使用してリストアイテムに「投稿を削除」機能を追加するには？

Question

私は現在、UdemyのModern React with Reduxコースを受講しています。

posts_showコンポーネント以下のように、反応ルータの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> 
 
     }) 
 
    }