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

Вот моя проблема . Если я изменю функцию 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));
}

Возвращает функцию, которая принимает параметр (предположительно объект события):

<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 2

Как говорили другие люди, вы возвращаете функцию, которая возвращает функцию, которая что-то делает, вместо того, чтобы возвращать функцию, которая что-то делает. Вы должны выбрать между:

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 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 объект подобного типа и предпочитаете использовать функцию curried, вам не следует использовать функцию стрелки в обработчике onclick.

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

Этого достаточно, чтобы использовать объект event и вкусные функции функции curry. Но так как вы не используете объект event, я не совсем уверен, что вы написали эту карри функцию намеренно.