我使用 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;
diveLog.component
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 和 props。