Question

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

Answer 1

您必须将handlePostId函数绑定到组件

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

Answer 2

好像您没有在构造函数中绑定handlePostId。

或者，您可以执行此操作而无需绑定。

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

然后像以前一样调用它：

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

React Redux：与Sample A Code完美配合，但与Sample B Code返回调度错误

2 个答案: