![](/img/trans.png)
[英]How to fix 'TypeError: Cannot read property 'style' of undefined' error when using material-ui Transitions
[英]React Material-UI Modal TypeError: Cannot read property 'hasOwnProperty' of undefined
每當我向其中一個類添加模態時,都會出現此錯誤。
類型錯誤:無法讀取未定義的屬性“hasOwnProperty”
這是一個基本示例,我只是嘗試始終顯示基本模態。 有任何想法嗎? 我已經嘗試了各種應該有效的示例,但我嘗試過的任何事情都無法阻止該錯誤。 似乎如果我添加 Modal 那么它只是錯誤。
編輯:找出問題。 模態需要一個單獨的根級子級,您需要將所有內容嵌入其中。
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));
MUI Modal 組件出現錯誤的原因
類型錯誤:無法讀取未定義的屬性“hasOwnProperty”
是你小時候沒有給 JSX 組件。
從此改變
<Modal open={true}>
Hello
</Modal>
到
<Modal open={true}>
<div>
Hello
</div>
</Modal>
如果您通過關鍵字hasOwnProperty搜索 Material-UI 項目的來源。 或遵循錯誤回調堆棧
你會在里面找到一些東西
function getHasTransition(props) {
return props.children ? props.children.props.hasOwnProperty('in') : false;
}
錯誤意味着props.children.props
未定義,這給了調試思路。
要解決錯誤,請在 div 中包含 Modal 內的所有內容。 例如:
<Modal>
<div>
...
....
</div>
</Modal>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.