javascript - 从子级到父级 react 中从 redux 传递的调用方法

Question

我坚持调用从我的主根组件传递到我的非常嵌套的组件的方法。我正在从 redux 传递该函数，但不知怎的，我遇到了问题，我无法执行它......

postActions.js

export function deletePost(id) {
        const request = axios.delete(`http://localhost:3000/api/posts/${id}`);
        return {
        type: "DELETE_POST",
        payload: request
    }
}

App.js(主根组件)

import {deletePost} from "../actions/postActions";
const mapStateToProps = (state) => {
    return {
        post: state.postReducer
    };
};

const mapDispatchToProps = (dispatch) => {
    return {
        deletePost:(id)=>{
            dispatch(deletePost(id));
        }
    }
}

另外，在我的应用程序组件(根)中，我有带有此 PropsRoute 的渲染方法，它类似于正常路线，但允许我传递 Prop ...

<PropsRoute path={"/posts/:id/:title"}  deletePost={this.props.deletePost} component={Posts} {...this.props.match} />  

export default connect(mapStateToProps, mapDispatchToProps)(App);

Posts.js

render(){    
    return(
        <div> 
            <main>   
                <Post deletePost={this.props.deletePost)} />
            </main>
        </div>
    ); 
    }

Post.js(这里我应该执行它)

render(){
   return (
     <LabelDelete handleDelete={this.deletePost} id={id}  {...this.props.children}/>
   )
}

最后const LabelDelete

const LabelDelete = (props) => (<span><button onClick={props.handleDelete}>Delete</button></span>);

所以这里的东西不起作用，我收到错误TypeError:_this2.deletePost不是handleDelete的函数，而且我不知道在哪里绑定(bind)this...

但是它有效，因为我没有在 redux 中使用这种方式这是

<LabelDelete handleDelete={this.handleDelete.bind(this)} id={id}  {...this.props.children}/>

handleDelete 函数如下所示:

handleDelete(){
    var id = this.props.id; 
    $.ajax({ 
        type:"DELETE",
        url:`http://localhost:3000/api/posts/${id}`, 
        success: function(res) { 
            setTimeout(function () {
              location.pathname="/user";
            }, 500);
        }.bind(this),
        error: function(xhr, status, err) {
            console.error(xhr, status, err.toString());
        }.bind(this)
      }); 
  }   

这有效，但我不想这样使用它，我希望它更清晰。有什么帮助吗？谢谢

Answer 1

在 Posts.js 中，您将 deletePost 作为 Post 组件的 props 传递。因此，在Post.js中，this.deletePost应该改为this.props.deletePost。

render(){
    return (
        <LabelDelete handleDelete={this.props.deletePost} id={id}  
            {...this.props.children}/>
    )
}