React Redux: отлично работает с образцом кода A, но возвращает ошибку отправки с образцом кода B

Question

React Redux: отлично работает с образцом кода A, но возвращает ошибку отправки с образцом кода B

Я пытаюсь отобразить сообщение Post, а затем отправить / отправить обратно записи на серверный сервер с помощью функции onclick.

Для этого я создал два образца кодов A и B.

Образцы кодов А работают идеально, но пример кода В работает частично.

В образец кода A ниже. Все работает нормально, как и ожидалось, так как я могу отображать записи и отправлять их обратно на серверный сервер.

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(userActions.getRec());

    }



handlePostId(postid,post_content){
//return  (e) => this.props.dispatch(Actions.sendData(postid,post_content));
return  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="Send Data 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 }

Образец кода B

Вот мои требования и моя проблема с образцом кода B.

У меня есть требования для создания реквизита, и в нем есть записи о возврате в соответствии с кодом ниже

const RenderPost = (props) => {
return (<React.Fragment><li >
          {props.post1.id} - {props.post1.content}

 <input type="button" value="Send Data not Working"  onClick={() => props.handlePostId(props.post1.id, 55)}  />
        </li>


        </React.Fragment>
        );
};

В функции «Карта» я отображал записи Post следующим образом

<RenderPost post1={post1} key={i} handlePostId={this.handlePostId} />

Образец B частично работает, поскольку он очень хорошо отображает записи, но моя проблема в том, что если я нажму кнопку «Отправить данные», чтобы отправлять записи на серверный сервер, будет отображаться ошибка

Cannot read property 'dispatch' of undefined
    at Object.handlePostId (bundle.js:73753)

    at onClick.

Является ли реквизит конфликтным или как?

Вот пример кода B

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

import { Actions } from '../_actions';



const RenderPost = (props) => {
return (<React.Fragment><li >
          {props.post1.id} - {props.post1.content}

 <input type="button" value="Send Data not Working"  onClick={() => props.handlePostId(props.post1.id, 55)}  />
        </li>


        </React.Fragment>
        );
};

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));
return  this.props.dispatch(Actions.sendData(postid,post_content));
    }



    render() {
  const { post1, posts1} = this.props;
        return (
            <div>
   {posts1.items1 &&

                    <ul>
                        {posts1.items1.map((post1, i) =>
 <RenderPost post1={post1} key={i} handlePostId={this.handlePostId} />


                        )}


                    </ul>

                }

            </div>

        );
    }
}


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


    };
}


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

Answer 1

Похоже, вы не связали handlePostId в своем конструкторе.

Кроме того, вы можете сделать это без необходимости связывания.

handlePostId = (postId, postContent) => {
    return this.props.dispatch(Actions.sendData(postId, postContent));
}

Тогда назови это так, как ты делал раньше:

<RenderPost post1={post1} key={i} handlePostId={this.handlePostId} />

Answer 2

Вы должны привязать функцию handlePostId к компоненту

<RenderPost post1={post1} key={i} handlePostId={this.handlePostId.bind(this)} />