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

Question

我正在尝试从调用该DeletePost函数

const mapDispatchToProps = (dispatch) => ({

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

});

但是，反应显示

无法读取未定义的属性“ props”

PostList.js

import {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) => {&nbsp; // use props.DeletePost() and props.posts.}破坏道具对象const PostList = (props) => {&nbsp; // use DeletePost() and posts.}mapDispatchToProps您没有将帖子ID传递给分派的DeletePost函数。const mapDispatchToProps = (dispatch) => ({&nbsp; // Pass id to the DeletePost functions.&nbsp; DeletePost: (id) => dispatch(DeletePost(id))});每次重新渲染时都调用removePost。onClick事件道具具有一个在用户单击时调用的功能。但是您正在做的是，不是在传递onClick属性，而是在调用该removePost函数。remove函数将依次返回undefined，单击按钮时不执行任何操作。但是，当您在渲染时调用removePost函数时，将调度DeletePost操作。我认为该操作将更新状态，这将导致组件重新呈现。而且您陷入了一个inifite循环中，因为removePost将再次被调用。为了解决这个问题。removePost函数应该返回一个新函数。从removePost返回的函数现在将分配给onClick道具，并在单击按钮时调用。例子&nbsp; const removePost = (id) => () => {&nbsp; &nbsp; DeletePost(id);&nbsp; }const PostList = ({DeletePost, posts}) => {&nbsp; // Return a new function. Otherwise the DeletePost action will be dispatch each time the Component rerenders.&nbsp; const removePost = (id) => () => {&nbsp; &nbsp; DeletePost(id);&nbsp; }&nbsp; return ( ... )}const mapDispatchToProps = (dispatch) => ({&nbsp; // Pass id to the DeletePost functions.&nbsp; DeletePost: (id) => dispatch(DeletePost(id))});