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

这是我的问题。如果我将onclick函数更改为下面的代码

<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方法中使用咖喱函数。这意味着您要从中返回另一个函数。这样，您可以使用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对象和curried函数的好东西。但是由于您没有使用event对象，所以我不确定您是否故意编写了此咖喱函数。

Answer 3

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

React Redux：发布记录部分与onclick函数一起使用

3 个答案: