javascript - React Redux：与示例 A 代码完美配合，但在示例 B 代码中返回调度错误

问题描述

React Redux：与示例 A 代码完美配合，但在示例 B 代码中返回调度错误

我正在尝试显示发布记录，然后通过 onclick 功能将记录发送/回发到服务器后端。

为此，我创建了两个代码 A 和 B的示例。

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

在 Map 函数中，我将 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 };

标签： javascriptreactjsredux

javascript - React Redux：与示例 A 代码完美配合，但在示例 B 代码中返回调度错误

问题描述

解决方案

推荐阅读