React Redux:发布记录部分适用于onclick功能

Question

我在 React Redux 中有以下代码。按照下面的代码将记录发布到服务器后端，一切正常。

handlePostId(postid,post_content){
return (e) => this.props.dispatch(Actions.sendData(postid,post_content));
}

<input type="button" value="Post" onClick={ this.handlePostId(post1.id, 55)}  />

这是我的问题。如果我将点击功能更改为下面的代码

<input type="button" value="Post" onClick={() => this.handlePostId(post1.id, 55)}  />

它不会将记录发布到服务器后端。并且控制台中没有显示任何错误，是因为这个() =>.请问我该如何纠正这个问题

这是整个代码

import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { connect } from 'react-redux';
import { Actions } from '../actions';

class App extends React.Component {
constructor(props) {
        super(props);
        this.state = {};
      }
    componentDidMount() {
this.props.dispatch(Actions.getRec());
    }

handlePostId(postid,post_content){
return (e) => this.props.dispatch(Actions.SendData(postid,post_content));

}
    render() {
  const { post1, posts1} = this.props;
        return (
            <div>       
   {posts1.items1 &&
                    <ul>
                        {posts1.items1.map((post1, index1) =>
                            <li key={post1.id}>

 {post1.content} ({post1.id})
<input type="button" value="Post working" onClick={ this.handlePostId(post1.id, 55)}  />
<input type="button" value="Post Not Working" onClick={() => this.handlePostId(post1.id, 55)}  />

                            </li>
                        )}

                    </ul>
}
            </div>

        );
    }
}

function mapStateToProps(state) {
const { posts1, post1 } = state;
    return {
        post1,
        posts1
    };
}

const connectedApp = connect(mapStateToProps)(App );
export { connectedApp  as App  };

Answer 1

正如其他人所说，你返回的是一个函数，它返回一个做某事的函数，而不是返回一个做某事的函数。您应该在以下选项之间进行选择：

handlePostId(postid, post_content) {
    return (e) => this.props.dispatch(Actions.SendData(postid,post_content));
}
// ..
onClick={this.handlePostId(post1.id, 55)}

和

handlePostId(postid, post_content) {
    return this.props.dispatch(Actions.SendData(postid,post_content));
}
// ..
onClick={() => this.handlePostId(post1.id, 55)}

或者，您可以添加一个mapDispatchToProps并在那里声明它，例如

function mapDispatchToProps(dispatch) {
    return {
        handlePostId: (postid, post_content) => {
            return dispatch(Actions.SendData(postid, post_content));
        },
    };
}
const connectedApp = connect(mapStateToProps, mapDispatchToProps)(App);

在你的渲染方法中，你可以做到

// ...
const { post1, posts1, handlePostId } = this.props;
// ...
onClick={() => handlePostId(post1.id, 55)}

Answer 2

handlePostId(postid,post_content){
    return (e) => this.props.dispatch(Actions.sendData(postid,post_content));
}

这将返回一个接受参数（大概是一个事件对象）的函数：

<input type="button" value="Post" onClick={this.handlePostId(post1.id, 55)}  />

为了将<input/>标签重写为

<input type="button" value="Post" onClick={() => this.handlePostId(post1.id, 55)}  />

您还需要修改handlePostId()以直接处理事件，而不是返回函数：

handlePostId(postid,post_content){
    return this.props.dispatch(Actions.sendData(postid,post_content));
}

Answer 3

您在handlePostId方法中使用了柯里函数。这意味着您将从中返回另一个函数。通过这样做，您可以使用event对象，而无需在单击处理程序中使用箭头函数。所以这有效：

onClick={this.handlePostId(post1.id, 55)}

但是，如果您再次添加 onclick 处理程序（箭头函数），您应该像这样调用它：

onClick={() => this.handlePostId(post1.id, 55)()}

请注意函数末尾的额外()。但是，您没有在处理程序方法中使用event对象，因此您可以简单地删除额外的函数并像这样返回您的操作调度：

handlePostId(postid,post_content) {
    return this.props.dispatch(Actions.sendData(postid,post_content));

并像这样使用它：

onClick={() => this.handlePostId(post1.id, 55)}

此外，如果您想使用这样的对象event并且更喜欢使用柯里德函数，那么您不应该在 onclick 处理程序中使用箭头函数。

onClick={this.handlePostId(post1.id, 55)}

这足以使用 event 对象和柯里德函数的好东西。但是由于您没有使用event对象，我不太确定您是故意编写此柯里德函数的。