繁体   English   中英

道具错误导致反应页面不显示

Props error causing react page not to display

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

我已经使用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等一些概念。

问题暂未有回复.您可以查看右边的相关问题.
1 d3 js treemap未知错误导致不显示

我正在使用 d3 js 和 vue js 向本地服务器显示树状图。 我通过 d3.json 数据加载数据并正确记录,但是当我将其加载到树状图函数并将其显示到正文时,它不会显示。 这是我的代码中的错误还是我做错了什么? 我对 d3 js 相当陌生,所以我一直在使用它作为参考。 谢谢你的帮助。 我使用的 ...

3 propTypes isRequired约束错误导致反应行为

我很反应(或说网络技术)。 我开始构建一个使用不同组件的应用程序。 当我浏览文档时,我想在isRequired中放置isRequired,约束用户在使用组件时提供所有isRequired属性。 但是,在这个例子中,即使我没有传递isRequired属性,我也可以加载组件。 使用 ...

4 javascript错误导致页面重新加载?

在部署过程中,我得到了一些奇怪的页面刷新,但是我似乎找不到原因或在开发中复制它。 有没有一种JavaScript错误或异常导致页面重新加载的方法? 或一些技巧可以帮助我缩小原因? 它发生在现场部署时,我无法在本地测试时复制它。 我知道这正在发生,因为我正在使用ELMAH记录异常。 ...

5 xml错误导致页面退出

我为curl动画制作了一个页面动画活动,但是当我尝试为第二个页面制作该活动的副本时,我在运行代码时收到此错误,这是logcat消息: 这是我的xml代码,logcat说有错误: 有人知道这是什么问题吗? 谢谢。 ...

2013-03-02 03:48:11 1 114   android
6 验证错误导致无法与页面互动

我有一个包含一些字段的表单,但是当我提交它而不输入任何数据(空)时,它会在黑色阴影的一侧提供电话验证错误,因此无法再次与页面进行交互。 我希望用户看到该消息,并且他也应该能够与该页面进行交互。 在此处输入图片说明 HTML: ...

7 由于页面错误导致的值不匹配

我正在编写一个伪字符设备驱动程序。 还有另一个util程序可以处理此驱动程序的文件。 util程序接收来自用户的消息字符串并将其填充到设备文件中。 我面临的问题是当发生页面错误时,之前写入文件的字符正在写入当前位置。 下图显示了它: 假设在写入“...test..”时在 't' 处发生页面错 ...

9 编码错误导致MS SpecialChars显示为问号

因此,当我从数据库中检索一列并在php中回显字符串时,它将显示Microsoft特殊字符。 但是,如果我从单元格复制字符串,将其粘贴到脚本中并直接回显,则内容正确。 在检索数据和显示数据之间的哪个阶段出问题了? 它是一个MS SQL数据库。 如果有关当前设置的更多信息有帮助, ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM