道具錯誤導致反應頁面不顯示

Question

我已經使用 react bootstrap 創建了一個表單，並在上面添加了一個數據表來顯示輸入的數據，但是當我的瀏覽器嘗試呈現我的頁面時，我不斷收到以下錯誤。

 1 of 10 errors on the page
TypeError: this.context._getProps is not a function
value
/WebApp/sustainable-scuba-web-app/hocs/control/index.js:9

   6 | static displayName = `Control(${WrappedComponent.name})`;
   7 | 
   8 | render() {
>  9 |   const props = this.context._getProps(this.id);
     | ^  10 | 
  11 |   if (!props) {
  12 |     return null;

潛水日志組件

import React, { useState, useRef, Component } from 'react';
// import * as ReactBootstrap from "react-bootstrap";
import { Form, Jumbotron } from 'react-bootstrap';
import { Col, Button, Table } from 'react-bootstrap';
import { Redirect } from "react-router-dom";
import { connect } from "react-redux";
//import Form from "react-validation/build/form";
import Input from "react-validation/build/input";
import CheckButton from "react-validation/build/button";
import isEmail from "validator/lib/isEmail";
import {registerUserDive} from "../../actions/divelog.action"

export class DiveLog extends Component  {

        constructor(props){

            super(props);
            this.handleSubmitDive = this.handleSubmitDive.bind(this);
            this.onChangeDiveType = this.onChangeDiveType.bind(this);
            this.onChangeSchoolName = this.onChangeSchoolName.bind(this);
            this.onChangeCurrent = this.onChangeCurrent.bind(this);
            this.onChangeVisibility = this.onChangeVisibility.bind(this);
            this.onChangeDiveDate = this.onChangeDiveDate.bind(this);
            this.onChangeMaxDepth = this.onChangeMaxDepth.bind(this);
            this.onChangeEquipmentWorn = this.onChangeEquipmentWorn.bind(this);
            this.onChangeDiverUserNumber = this.onChangeDiverUserNumber.bind(this);
            this.onChangeVerifiedBySchool = this.onChangeVerifiedBySchool.bind(this);
            this.onChangeDiveNotes = this.onChangeDiveNotes.bind(this);
            this.onChangeDivePoint = this.onChangeDivePoint.bind(this);

            this.state = {
                diveTypeID: "",
                diveSchoolNameID: "",
                diveCurrentID: "",
                diveVisibilityID: "",
                diveDate: "",
                diveMaxDepth: "",
                diveEquipmentWorn: "",
                diverUserNumber: "",
                diveVerifiedBySchool: "",
                diveNotes: "",
                divePoint: "",
                loading: false,
            };
        }

        onChangeDiveType(e) {
            this.setState({
                diveTypeID: e.target.value,
            });
        }

        onChangeSchoolName(e) {
            this.setState({
                diveSchoolNameID: e.target.value,
            });
        }

        onChangeCurrent(e) {
            this.setState({
                diveCurrentID: e.target.value,
            });
        }

        onChangeVisibility(e){
            this.setState({
                diveVisibilityID: e.target.value,
            });
        }

        onChangeDiveDate(e) {
            this.setState({
                diveDate: e.target.value,
            });
        }

        onChangeMaxDepth(e){
            this.setState({
                diveMaxDepth: e.target.value,
            });
        }

        onChangeEquipmentWorn(e) {
            this.setState({
                diveEquipmentWorn: e.target.value,
            });
        }

        onChangeDiverUserNumber(e){
            this.setState({
                diverUserNumber: e.target.value,
            });
        }

        onChangeVerifiedBySchool(e){
            this.setState({
                diveVerifiedBySchool: e.target.value,
            });
        }

        onChangeDiveNotes(e) {
            this.setState({
                diveNotes: e.target.value,
            });
        }

        onChangeDivePoint(e){
            this.setState({
                divePoint: e.target.value,
            });
        }


        handleSubmitDive(e) {

            e.preventDefault();

            this.setState({
                loading: true,
            });
            //this.form.validateAll();

            //const {dispatch, history} = this.props;

            if (this.checkBtn.context._errors.length === 0) {
                this.props
                    .dispatch(registerUserDive(

                        this.state.diveTypeID,
                        this.state.diveSchoolNameID,
                        this.state.diveCurrentID,
                        this.state.diveVisibilityID,
                        this.state.diveDate,
                        this.state.diveMaxDepth,
                        this.state.diveEquipmentWorn,
                        this.state.diverUserNumber,
                        this.state.diveVerifiedBySchool,
                        this.state.diveNotes,
                        this.state.diveNotes))

                    .then(() => {
                        window.history.push("/divelog");
                        window.location.reload();
                    })
                    .catch(() => {
                        this.setState({
                            loading: false
                        });
                    });
            }
        }


    render() {

            const { message } = this.props;

            //const { user: currentUser } = this.props;

            //if (!currentUser) {
            //    return <Redirect to="/login"/>;
            //}

        return (

            <div className="container">

                <Jumbotron>
                    <h1>This is the dive log component.</h1>

                    <p>
                    This is a simple hero unit, a simple jumbotron-style component for calling
                    extra attention to featured content or information.
                    </p>

                    <Table striped bordered hover variant="dark">
                    <thead>
                    <tr>
                        <th>#</th>
                        <th>First Name</th>
                        <th>Last Name</th>
                        <th>Username</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>1</td>
                        <td>Mark</td>
                        <td>Otto</td>
                        <td>@mdo</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>Jacob</td>
                        <td>Thornton</td>
                        <td>@fat</td>
                    </tr>
                    <tr>
                        <td>3</td>
                        <td colSpan="2">Larry the Bird</td>
                        <td>@twitter</td>
                    </tr>
                    </tbody>
                    </Table>
                </Jumbotron>

                <div className="diveLogForm">
                <Form
                    onSubmit={this.handleSubmitDive}
                    ref={(c) => {
                        this.form = c;
                    }}>
                    {!this.state.successful && (

                    <div>
                    <Form.Group controlId="diveType.ControlSelect1">
                        <Form.Label>Dive Type</Form.Label>
                        <Input
                            type="diveType"
                            className="form-control"
                            name="diveType"
                            value={this.state.diveTypeID}
                            onChange={this.onChangeDiveType}
                        />
                        <Form.Control as="select">
                            <option>1</option>
                            <option>2</option>
                            <option>3</option>
                            <option>4</option>
                            <option>5</option>
                        </Form.Control>
                    </Form.Group>

                    <Form.Group controlId="DiveSchool.ControlSelect2">
                        <Form.Label>Dive School</Form.Label>
                        <Input
                            type="diveSchool"
                            className="form-control"
                            name="diveSchool"
                            value={this.state.diveSchoolID}
                            onChange={this.onChangeSchoolName}
                        />
                        <Form.Control as="select" multiple>
                            <option>1</option>
                            <option>2</option>
                            <option>3</option>
                            <option>4</option>
                            <option>5</option>
                        </Form.Control>
                    </Form.Group>

                    <Form.Group controlId="DiveCurrent.ControlSelect3">
                        <Form.Label>Dive Current</Form.Label>
                        <Input
                            type="diveCurrent"
                            className="form-control"
                            name="diveCurrent"
                            value={this.state.diveCurrentID}
                            onChange={this.onChangeCurrent}
                        />
                        <Form.Control as="select" multiple>
                            <option>1</option>
                            <option>2</option>
                            <option>3</option>
                            <option>4</option>
                            <option>5</option>
                        </Form.Control>
                    </Form.Group>
                    <Form.Group controlId="DiveVisibility.ControlSelect4">
                        <Form.Label>Dive Visibility</Form.Label>
                        <Input
                            type="diveVisibility"
                            className="form-control"
                            name="diveVisibility"
                            value={this.state.diveVisibilityID}
                            onChange={this.onChangeVisibility}
                        />
                        <Form.Control as="select" multiple>
                            <option>1</option>
                            <option>2</option>
                            <option>3</option>
                            <option>4</option>
                            <option>5</option>
                        </Form.Control>
                    </Form.Group>
                    <Form.Group controlId="diveDate.ControlTextarea1">
                        <Form.Label>Dive Date</Form.Label>
                        <Input
                            type="diveDate"
                            className="form-control"
                            name="diveDate"
                            value={this.state.diveDate}
                            onChange={this.onChangeDiveDate}
                        />
                        <Form.Control as="textarea" rows={1}/>
                    </Form.Group>
                    <Form.Group controlId="DiveMaxDepth.ControlTextarea2">
                        <Form.Label>Dive Max Depth</Form.Label>
                        <Input
                            type="diveMaxDepth"
                            className="form-control"
                            name="diveMaxDepth"
                            value={this.state.diveMaxDepth}
                            onChange={this.onChangeMaxDepth}
                        />
                        <Form.Control as="textarea" rows={1}/>
                    </Form.Group>
                    <Form.Group controlId="DiveEquipmentWorn.ControlTextarea3">
                        <Form.Label>Dive Equipment Worn</Form.Label>
                        <Input
                            type="diveEquipmentWorn"
                            className="form-control"
                            name="diveEquipmentWorn"
                            value={this.state.diveEquipmentWorn}
                            onChange={this.onChangeEquipmentWorn}
                        />
                        <Form.Control as="textarea" rows={1}/>
                    </Form.Group>
                    <Form.Group controlId="DiverUserNumber">
                        <Form.Label column sm="2">
                            Username
                        </Form.Label>
                        <Col sm="10">
                            <Form.Control plaintext readOnly defaultValue="UsernameFromSystem"/>
                        </Col>
                    </Form.Group>
                    <Form.Group controlId="formPlaintextEmail">

                        <Form.Label column sm="2">
                            Dive Verified by School
                        </Form.Label>
                        <Col sm="10">
                            <Form.Control plaintext readOnly defaultValue="ToBeVerifiedBySchool"/>
                        </Col>
                    </Form.Group>
                    <Form.Group controlId="Dive Notes.ControlTextarea4">
                        <Form.Label>Dive Notes</Form.Label>
                        <Input
                            type="diveNotes"
                            className="form-control"
                            name="diveNotes"
                            value={this.state.diveNotes}
                            onChange={this.onChangeDiveNotes}
                        />
                        <Form.Control as="textarea" rows={3}/>
                    </Form.Group>
                    <Form.Group controlId="divePoint.ControlSelect5">
                        <Form.Label>Select Dive Point</Form.Label>
                        <Input
                            type="divePoint"
                            className="form-control"
                            name="divePoint"
                            value={this.state.divePoint}
                            onChange={this.onChangeDivePoint}
                        />
                        <Form.Control as="select" multiple>
                            <option>1</option>
                            <option>2</option>
                            <option>3</option>
                            <option>4</option>
                            <option>5</option>
                        </Form.Control>
                    </Form.Group>
                        <Button variant="primary" type="submit">
                            Submit
                        </Button>
                        </div>
                        )}
                            {message && (
                                <div className="form-group">
                                    <div className={ this.state.successful ? "alert alert-success" : "alert alert-danger" } role="alert">
                                        {message}
                                    </div>
                                </div>
                            )}
                        <CheckButton
                            style={{ display: "none" }}
                            ref={(c) => {
                                this.checkBtn = c;
                            }}
                        />
                </Form>
                </div>
            </div>
        )
    };
}

function mapStateToProps(state) {
    const { DiveLog } = state.auth;
    return {
        DiveLog,
    };
}

export default connect(mapStateToProps)(DiveLog);

我在這個組件中做錯了什么明顯的事情嗎？ 這是我第一次使用 react，我仍在嘗試理解一些概念，例如 Redux 和道具。