[英]React Material-UI Modal TypeError: Cannot read property 'hasOwnProperty' of undefined
Any time I add a modal to one of my classes I get this error.每当我向其中一个类添加模态时,都会出现此错误。
TypeError: Cannot read property 'hasOwnProperty' of undefined
类型错误:无法读取未定义的属性“hasOwnProperty”
Here's a basic example where I'm just trying to always show a basic modal.这是一个基本示例,我只是尝试始终显示基本模态。 Any ideas?
有任何想法吗? I've tried various examples that should work, but nothing I have tried prevents the error.
我已经尝试了各种应该有效的示例,但我尝试过的任何事情都无法阻止该错误。 Seems if I add Modal then it just errors.
似乎如果我添加 Modal 那么它只是错误。
Edit: Figured out the issue.编辑:找出问题。 The modal requires a single root level child you need to embed all your content in.
模态需要一个单独的根级子级,您需要将所有内容嵌入其中。
import React from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';
import Avatar from '@material-ui/core/Avatar';
import Button from '@material-ui/core/Button';
import CssBaseline from '@material-ui/core/CssBaseline';
import TextField from '@material-ui/core/TextField';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import Checkbox from '@material-ui/core/Checkbox';
import Grid from '@material-ui/core/Grid';
import LockOutlinedIcon from '@material-ui/icons/LockOutlined';
import Typography from '@material-ui/core/Typography';
import { withStyles } from '@material-ui/core/styles';
import Container from '@material-ui/core/Container';
import { Schema, Field } from "v4f";
import Modal from '@material-ui/core/Modal';
const styles = theme => ({
'@global': {
body: {
backgroundColor: theme.palette.common.white,
},
},
paper: {
marginTop: theme.spacing(8),
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
},
avatar: {
margin: theme.spacing(1),
backgroundColor: theme.palette.secondary.main,
},
form: {
width: '100%', // Fix IE 11 issue.
marginTop: theme.spacing(1),
},
submit: {
margin: theme.spacing(3, 0, 2),
},
});
const initState = {
email: "",
password: "",
errors: {}
};
const SignInValidator = Schema(
{
email: Field()
.string()
.email({ message: "Not an e-mail address" })
.required({ message: "E-mail is required" }),
password: Field()
.string()
.required({ message: "Password is required" })
},
{ verbose: true, async: true }
// We set the options on creation all call to Schema Product will be verbose and async
);
class SignIn extends React.Component
{
constructor(props) {
super(props);
this.state = { ...initState };
}
//Handle Submit & Handle Change
handleChange = (e) => {
this.setState({ [e.target.name]: e.target.value });
}
handleDirty = (e) => {
const { name, value } = e.target;
const isValid = SignInValidator[name].validate(value, {
verbose: true,
values: this.state
});
if (isValid !== true) {
this.setState({
errors: { ...this.state.errors, [name]: isValid }
});
}
else {
this.setState({
errors: { ...this.state.errors, [name]: undefined }
});
}
}
handleSubmit = (e) => {
e.preventDefault();
SignInValidator.validate(this.state)
.then(data => {
this.login();
})
.catch(errors => {
this.setState({ errors });
});
}
login = (e) => {
var email = encodeURI(this.state.email);
var password = encodeURI(this.state.password);
fetch(`/login/login?Username=${email}&Password=${password}`)
.then(data => {
console.log(data);
alert("Login Success!");
//Navigate to the dashboard
this.setState(initState);
})
.catch(e => {
alert("Login Failed");
console.error(e);
});
};
render()
{
const { classes } = this.props;
return (
<Container component="main" maxWidth="xs">
<CssBaseline />
<div className={classes.paper}>
<Avatar className={classes.avatar}>
<LockOutlinedIcon />
</Avatar>
<Typography component="h1" variant="h5">
Sign in
</Typography>
<form className={classes.form}>
<TextField
variant="outlined"
margin="normal"
required
fullWidth
id="email"
label="Email Address"
name="email"
autoComplete="email"
onChange={this.handleChange}
onBlur={this.handleDirty}
error={this.state.errors.email !== undefined}
helperText={this.state.errors.email}
value={ this.state.email }
/>
<TextField
variant="outlined"
margin="normal"
required
fullWidth
name="password"
label="Password"
type="password"
id="password"
onChange={this.handleChange}
onBlur={this.handleDirty}
error={this.state.errors.password !== undefined}
helperText={this.state.errors.password}
value={this.state.password}
autoComplete="current-password"
/>
<FormControlLabel
control={<Checkbox value="remember" color="primary" />}
label="Remember me"
/>
<Button
type="submit"
fullWidth
variant="contained"
color="primary"
className={classes.submit}
onClick={this.handleSubmit}
>
Sign In
</Button>
<Grid container>
<Grid item xs>
<Link to='/' variant="body2">
Forgot password?
</Link>
</Grid>
<Grid item>
<Link to='/sign-up' variant="body2">
{"Don't have an account? Sign Up"}
</Link>
</Grid>
</Grid>
</form>
<Modal open={true}>
Hello
</Modal>
</div>
</Container>
);
}
}
export default connect()(withStyles(styles)(SignIn));
The reason for MUI Modal component having the error MUI Modal 组件出现错误的原因
TypeError: Cannot read property 'hasOwnProperty' of undefined
类型错误:无法读取未定义的属性“hasOwnProperty”
Is that you didn't give a JSX component as a child.是你小时候没有给 JSX 组件。
Change from this从此改变
<Modal open={true}>
Hello
</Modal>
to到
<Modal open={true}>
<div>
Hello
</div>
</Modal>
If you search the source of Material-UI project by the keyword hasOwnProperty .如果您通过关键字hasOwnProperty搜索 Material-UI 项目的来源。 or following the error callback stack
或遵循错误回调堆栈
You would find something in你会在里面找到一些东西
function getHasTransition(props) {
return props.children ? props.children.props.hasOwnProperty('in') : false;
}
The error means the props.children.props
is undefined, which gave the debug thought.错误意味着
props.children.props
未定义,这给了调试思路。
To solve the error include everything inside the Modal in a div.要解决错误,请在 div 中包含 Modal 内的所有内容。 for eg:
例如:
<Modal>
<div>
...
....
</div>
</Modal>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.