调用分派时无法读取未定义的属性“ props”

Question

我正在尝试从调用该DeletePost函数const mapDispatchToProps = (dispatch) => ({    DeletePost: () => dispatch(DeletePost())});但是，反应显示无法读取未定义的属性“ props”PostList.jsimport {connect} from 'react-redux';import {DeletePost} from '../actions/';const Styles = {    myPaper: {        margin: '20px 0px',        padding: '20px'    }}const removePost = (id) => {  // showing error below this line cannot read props  this.props.DeletePost(id);}const PostList = ({props, posts}) => {    return (        <div>            {posts.map((post, i) => (                <Paper key={i} style={Styles.myPaper}>                    <Typography variant="h6" component="h3">                        {post.title}                    </Typography>                    <Typography component="p">                        {post.post_content}                        <h5>                            by: {post.username}</h5>                        <h5>                            {moment(post.createdAt).calendar()}</h5>                    </Typography>                    <Button                        variant="outlined"                        color="primary"                        type="submit"                        onClick={removePost(post.id)}>                        Remove                    </Button>                </Paper>            ))}        </div>    )};const mapDispatchToProps = (dispatch) => ({    DeletePost: () => dispatch(DeletePost())});export default connect(null, mapDispatchToProps)(PostList);

Answer 1

因为this在removePost函数中没有绑定上下文。您需要将其放置在PostList函数中。另外，您的代码中存在三个错误。

组件道具

Component函数props作为参数。使用props对象（props.DeletePost），或从props对象中破坏DeletePost函数（{ DeletePost }）。在您的情况下，您正试图同时做到这两者。从道具破坏道具（等于props.props）。

使用道具对象

const PostList = (props) => {

  // use props.DeletePost() and props.posts.

}

破坏道具对象

const PostList = (props) => {

  // use DeletePost() and posts.

}

mapDispatchToProps

您没有将帖子ID传递给分派的DeletePost函数。

const mapDispatchToProps = (dispatch) => ({

  // Pass id to the DeletePost functions.

  DeletePost: (id) => dispatch(DeletePost(id))

});

每次重新渲染时都调用removePost。

onClick事件道具具有一个在用户单击时调用的功能。但是您正在做的是，不是在传递onClick属性，而是在调用该removePost函数。remove函数将依次返回undefined，单击按钮时不执行任何操作。但是，当您在渲染时调用removePost函数时，将调度DeletePost操作。我认为该操作将更新状态，这将导致组件重新呈现。而且您陷入了一个inifite循环中，因为removePost将再次被调用。

为了解决这个问题。removePost函数应该返回一个新函数。从removePost返回的函数现在将分配给onClick道具，并在单击按钮时调用。

例子

  const removePost = (id) => () => {

    DeletePost(id);

  }

const PostList = ({DeletePost, posts}) => {

  // Return a new function. Otherwise the DeletePost action will be dispatch each time the Component rerenders.

  const removePost = (id) => () => {

    DeletePost(id);

  }

  return ( ... )

}

const mapDispatchToProps = (dispatch) => ({

  // Pass id to the DeletePost functions.

  DeletePost: (id) => dispatch(DeletePost(id))

});