TypeError：无法解构“ object null”的属性“ openPostModal”，因为它为null

Question

由于某种原因，我遇到了这个问题，无法弄清为什么会发生此错误。 这是我的代码：

class PostCardDetail extends Component {
    constructor(props) {
        super(props);
    }

    modalPostCheck = ({ openPostModal }) => {

        this.showPostModal = openPostModal;

    }

    onPostClick = () => {
        this.showPostModal();
    }

    render() {
        return (
            <div>
                <PostView ref={this.modalPostCheck} onePost={this.props.onePost}></PostView>

                <Card>
                    <Card.Img variant="top" src={icon} />
                    <Card.Body>
                        <Card.Title style={{
                            display: "flex",
                            justifyContent: "center",
                            alignItems: "center"
                        }}>{this.props.onePost.data.title}</Card.Title>
                        <Card.Text style={{
                            display: "flex",
                            justifyContent: "center",
                            alignItems: "center",
                        }}>
                            {this.props.onePost.data.description}
                        </Card.Text>
                        <Button variant="primary" onClick={this.onPostClick}>Click</Button>
                    </Card.Body>
                </Card>
            </div>
        );

    }
}
export default PostCardDetail;


class PostView extends Component {
    constructor(props) {
        super(props);
        this.state = {
            showPostModal: false,
            showEditModal: false,
            showDeleteModal: false
        }

        this.openEditModal = this.openEditModal.bind(this);
        this.openPostModal = this.openPostModal.bind(this);
        this.closeEditModal = this.closeEditModal.bind(this);
        this.closePostModal = this.closePostModal.bind(this);
    }

    openEditModal = () => {
        this.setState({
            showPostModal: false,
            showEditModal: true
        })
    }

    openPostModal = () => {
        this.setState({
            showPostModal: true,
            showEditModal: false
        })
    }

    openDeleteModal = () => {
        this.setState({
            showEditModal: false,
            showPostModal: true,
            showDeleteModal: true
        })
    }

    closeEditModal = () => {
        this.setState({showEditModal: false})
    }

    closePostModal = () => {
        this.setState({showPostModal: false})
    }

    closeDeleteModal = () => {
        this.setState({showDeleteModal: false})
    }

    render() {
        return(
            <div>
                {this.state.showPostModal && (
                    <PostModal
                    show={this.state.showPostModal}
                    onHide={this.closePostModal}
                    openEditModal={this.openEditModal}
                    openDeleteModal={this.openDeleteModal}
                    onePost={this.props.onePost}/>
                )}
                {this.state.showEditModal && (
                    <EditModal
                    show={this.state.showEditModal}
                    onHide={this.closeEditModal}/>
                )}
                {this.state.showDeleteModal && (
                    <DeleteModal
                    show={this.state.showDeleteModal}
                    onHide={this.closeDeleteModal}/>
                )}
            </div>

        );
    }
}
export default PostView;


class PostModal extends Component {

    constructor(props) {
        super(props);
    }

    render() {
        return (
            <div>
                <Modal
                    {...this.props}
                    size="lg"
                    aria-labelledby="contained-modal-title-vcenter"
                    centered
                >
                    <Modal.Header className="modal-header" closeButton>
                        <Modal.Title id="contained-modal-title-vcenter">
                            {this.props.onePost.data.title}
                        </Modal.Title>
                    </Modal.Header>
                    <Modal.Body>
                        <div className="modal-body">
                            <p><span className="modal-label">Type: </span><span>{this.props.onePost.data.isDefinite}</span></p>
                            <p><span className="modal-label">Location: </span><span>{this.props.onePost.data.location}</span></p>

                            {
                                this.props.onePost.data.isDefinite == 'definite' ?
                                    <div>
                                        <p><span className="modal-label">Event Date and Time:</span></p>
                                        <p><span className="modal-label">Start date and time: </span><span>{this.props.onePost.data.startDate}</span></p>
                                        <p><span className="modal-label">End date and time: </span><span>{this.props.onePost.data.endDate}</span></p>
                                    </div> : null
                            }

                            <p><span className="modal-label">Description: </span><span>{this.props.onePost.data.description}</span></p>
                        </div>
                    </Modal.Body>
                    <Modal.Footer>
                        <Button variant="danger" onClick={this.props.openEditModal}>Edit</Button>
                        <Button variant="danger" onClick={this.props.openDeleteModal}>Delete</Button>
                    </Modal.Footer>
                </Modal>
            </div>
        );

    }
}
export default PostModal;

我已经跟踪所有在线工作，使用引用从PostView调用函数到PostCardDetail，但是错误不断出现，我迷路了。 Below is the error。

  

TypeError：无法解构“ object null”的属性“ openPostModal”，因为它为null。   PostCardDetail.modalPostCheck

    modalPostCheck = ({ openPostModal }) => {
           this.showPostModal = openPostModal;