当我执行npm运行构建并从构建文件夹运行index.html时,我得到一个错误:未捕获的类型错误:超级表达式必须为空或函数
当我在开发服务器上启动应用程序时,它工作得很好。
源代码:弹出窗口:
import React, {Component} from 'react';
import {
Button,
Dialog,
DialogTitle,
DialogContent,
DialogContentText,
DialogActions
} from "@material-ui/core";
export default class RegFormPopUp extends Component{
constructor(props) {
super(props);
this.state = {
open: false,
dialogTitle: "",
dialogBody: "",
btnAgreeText: "Souhlasím",
btnDisAgreeText: "Nesouhlasím"
};
this.handleAgreement = this.handleAgreement.bind(this);
this.handleClose = this.handleClose.bind(this);
}
Open(dialogBodyText,dialogTitleText) {
this.setState({
dialogBody: dialogBodyText,
dialogTitle: dialogTitleText,
open: true
});
}
handleAgreement(event) {
this.setState({open:false});
this.props.AgreementCallback();
}
handleClose() {
this.setState({open: false});
}
render() {
return (
<div>
<Dialog
open={this.state.open}
onClose={this.handleClose}
aria-labelledby="alert-dialog-title"
aria-describedby="alert-dialog-description"
>
<DialogTitle id="alert-dialog-title">{this.state.dialogTitle}</DialogTitle>
<DialogContent>
<DialogContentText id="alert-dialog-description">
{this.state.dialogBody}
</DialogContentText>
</DialogContent>
<DialogActions>
<Button onClick={this.handleClose} color="primary">
{this.state.btnDisAgreeText}
</Button>
<Button onClick={this.handleAgreement} color="primary" autoFocus>
{this.state.btnAgreeText}
</Button>
</DialogActions>
</Dialog>
</div>
);
}
}
RegForm:
import React, {Component} from 'react';
import {
TextField,
Checkbox,
FormControlLabel,
FormControl,
Typography,
Button,
} from "@material-ui/core";
import PhoneInput from 'material-ui-phone-number';
import {DatePicker, MuiPickersUtilsProvider} from "@material-ui/pickers";
import csLocale from 'date-fns/locale/cs';
import DateFNSUtils from '@date-io/date-fns';
import addYear from 'date-fns/addYears';
import Moment from 'moment';
//import 'react-phone-input-2/dist/style.css';
import RegFormPopUp from "./RegFormPopUp";
import LoadingOverlay from 'react-loading-overlay';
import qs from 'query-string';
export default class RegistrationForm extends Component{
constructor(props) {
super(props);
this.state = {
birthDay: addYear(Date.now(), -18),
phone: '',
agreement: true,
requestDate: Date.now(),
open: false,
stateValues: ["firstName", "lastName", "phone", "agreement", "FormattedRequestDate", "Note", "SelectedTime", "FormattedBirthDay"],
firstName: "",
lastName: "",
Note: "",
AvailableHours: [],
SelectedTime: "",
FormattedRequestDate: "",
FormattedBirthDay: "",
PDFURL: "",
dialogTitle: "",
dialogBody: "",
ShowLoadingBar: false,
submitAction: "insert",
editedUserID: ""
};
this.GdprDialogTitle = "";
this.GdprDialogBody = "";
this.ApiURL = "";
this.dialogRef = React.createRef();
this.GDPR = React.createRef();
this.handleDate = this.handleDate.bind(this);
this.handlePhoneNumber = this.handlePhoneNumber.bind(this);
this.handleAgreement = this.handleAgreement.bind(this);
this.closeModal = this.closeModal.bind(this);
this.openModal = this.openModal.bind(this);
this.handleFirstName = this.handleFirstName.bind(this);
this.handleLastName = this.handleLastName.bind(this);
this.processForm = this.processForm.bind(this);
this.handleNote = this.handleNote.bind(this);
this.DownloadTimes = this.DownloadTimes.bind(this);
this.handleSelectedTime = this.handleSelectedTime.bind(this);
this.UserAgreeWithGDPR = this.UserAgreeWithGDPR.bind(this);
this.DownloadPDFURL();
this.DownloadTimes();
Moment.locale('cs-CZ');
}
componentDidMount() {
this.DownloadAndInitEdit(qs.parse(window.location.search).userid);
}
render() {
return (
<LoadingOverlay active={this.state.ShowLoadingBar}
spinner
text={'Počkejte prosím...'}
>
<RegFormPopUp ref={this.dialogRef} AgreementCallback={this.UserAgreeWithGDPR}/>
<form onLoad={this.DownloadTimes} onSubmit={this.processForm}>
<FormControl>
<TextField label={'Jméno'}
id={"FirstName"}
onChange={this.handleFirstName}
required
InputLabelProps={{shrink: true}}
value={this.state.firstName}
/>
<TextField label={'Příjmení'} id={"LastName"}
onChange={this.handleLastName}
name={"LastName"}
required
InputLabelProps={{shrink: true}}
value={this.state.lastName}
/>
<PhoneInput id={"PhoneNumb"} onChange={this.handlePhoneNumber} value={this.state.phone}
onlyCountries={['cz']}
defaultCountry={"cz"}
label={"Zadejte své telefonní číslo"}
required
/>
<MuiPickersUtilsProvider utils={DateFNSUtils} locale={csLocale}>
<DatePicker disableFuture={true} format={'dd.MM.yyyy'} okLabel={"Vybrat"}
cancelLabel={"Zrušit výběr"} value={this.state.birthDay}
onChange={(event) => this.handleDate(event)}
id={"DateOfBirth"}
label={"Datum narození"}
/>
</MuiPickersUtilsProvider>
<MuiPickersUtilsProvider utils={DateFNSUtils} locale={csLocale}>
<DatePicker disablePast={true} format={'dd.MM.yyyy'} okLabel={"Vybrat"}
cancelLabel={"Zrušit výběr"}
value={this.state.requestDate}
onChange={(event) => this.handleRequestDate(event)} id={"RequestedDate"}
shouldDisableDate={this.disableWeekends}
label={"Datum objednání"}
/>
</MuiPickersUtilsProvider>
<TextField
disabled
label={"Aktuální vybraný čas"}
value={this.state.SelectedTime} style={{
display: (this.state.SelectedTime !== "" && this.state.submitAction === "update") ? "" : "none"
}}
variant="filled"
/>
<TextField
id={"SelectedTime"}
required
value={this.state.SelectedTime}
select
onChange={this.handleSelectedTime}
SelectProps={{
native: true,
MenuProps: {}
}}
label={"Vyberte čas"}
>
<option/>
{this.state.AvailableHours.map((item, key) => (
<option key={key} value={item}>{item}</option>
))
}
</TextField>
<TextField multiline id={"Note"} rows={"4"} variant={"outlined"} label={"Poznámka"}
margin={"normal"} onChange={this.handleNote} value={this.state.Note}/>
<FormControlLabel
ref={this.GDPR}
control={<Checkbox value={this.state.agreement} checked={this.state.agreement}
onChange={this.handleAgreement}/>}
label={
<div><Typography>Souhlasím s
<a
href={this.state.PDFURL} target={"_blank"}> podmínkami</a></Typography>
</div>
}/>
<Button type={"submit"} color={"primary"} variant={"contained"}>Rezervovat</Button>
</FormControl>
</form>
</LoadingOverlay>
);
}
}
*我从源代码中删除了js函数的一部分。
我做错了什么?
通过删除文件夹节点_模块并使用npm update命令重新安装,整个问题得以解决。谢谢你试着帮助我
跟踪这个问题的问题无法解决我的问题。 reactjs给出错误未捕获类型错误:超级表达式必须为空或函数,而不是未定义 我的反应版本是"^15.3.1"。 我添加了下面的代码片段
我试着检查了其他帖子,上面写着看到了同样的错误信息,但是没有一个符合我的上下文。我是新来的ReactJS,我正在我自己的项目。所以,我创建了两个文件index.html和js/index.js。 “index.html”文件包含以下代码: “js/index.js”文件包含: 我不知道这个代码有什么问题,我得到了错误。
我正在尝试为我不喜欢反复做的事情扩展React组件,
问题内容: 我使用React编写此演示。我使用Webpack来构建此演示。启动此演示时,错误将显示给我。 错误: 未捕获的TypeError:超级表达式必须为null或函数,且未定义 我不知道该怎么解决。 问题答案: 代码中的唯一警告是由于您没有扩展正确的类,而需要扩展。
问题内容: 我正在使用reactjs。 当我在浏览器下面运行代码时: 未捕获的TypeError:超级表达式必须为null或函数,且未定义 关于任何错误的任何暗示将不胜感激。 首先是用于编译代码的行: 和代码: 更新:在针对此问题的地狱之火中燃烧了三天后,我发现我没有使用最新版本的react。 全局安装: 在本地安装: 确保浏览器也使用正确的版本: 希望这可以为他人节省三天的宝贵生命。 问题答案:
我一直在学习udemy的课程,但无论我做什么,都会出现一个错误: 以下是组件代码: 下面是我要导入的图表组件: 但显然是反应。组件未定义,所以它会抛出一个错误。