Javascript 反应物料UI模式类型错误：无法读取属性'；拥有自己的财产'；未定义的

每当我向我的一个类添加一个模态时，我都会得到这个错误

TypeError:无法读取未定义的属性“hasOwnProperty”

这是一个基本的例子，我只是想展示一个基本的模态。有什么想法吗？我已经尝试过各种应该有效的例子，但是我没有尝试过任何可以防止错误的方法。似乎如果我添加模态，那么它只是错误

编辑：解决了问题。模式需要一个根级别的子级，您需要将所有内容嵌入其中

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));

从“React”导入React；
从'react redux'导入{connect}；
从'react router dom'导入{Link}；
从“@material ui/core/Avatar”导入化身；
从“@material ui/core/Button”导入按钮；
从“@material ui/core/CssBaseline”导入CssBaseline；
从“@material ui/core/TextField”导入TextField；
从“@material ui/core/FormControlLabel”导入FormControlLabel；
从“@material ui/core/Checkbox”导入复选框；
从“@material ui/core/Grid”导入网格；
从“@material ui/icons/LockOutlinedIcon”导入LockOutlinedIcon；
从“@material ui/core/Typography”导入排版；
从“@material ui/core/styles”导入{withStyles}”；
从“@material ui/core/Container”导入容器；
从“v4f”导入{Schema，Field}；
从“@material ui/core/Modal”导入模态；
常量样式=主题=>({
“@global”：{
正文：{
背景色：theme.palette.common.white，
},
},
论文：{
marginTop：主题。间距（8），
显示：“flex”，
flexDirection:'列'，
对齐项目：“居中”，
},
化身：{
边距：主题。间距（1），
背景色：theme.palete.secondary.main，
},
表格：{
宽度：“100%”，//修复IE 11问题。
marginTop：主题。间距（1），
},
提交：{
边距：主题。间距（3,0,2），
},
});
常量initState={
电邮：“，
密码：“”，
错误：{}
};
const SignInValidator=Schema(
{
电子邮件：Field（）
.string（）
.email（{message:“非电子邮件地址”}）
.required（{消息：“需要电子邮件”}），
密码：字段（）
.string（）
.required（{消息：“需要密码”}）
},
{verbose:true，async:true}
//我们在创建时设置选项，所有对模式产品的调用都将是详细和异步的
);
类签名扩展了React.Component
{
建造师（道具）{
超级（道具）；
this.state={…initState}；
}
//处理提交和处理更改
handleChange=（e）=>{
this.setState（{[e.target.name]：e.target.value}）；
}
handleDirty=（e）=>{
常量{name，value}=e.target；
const isValid=SignInValidator[name].validate（值{
没错，
值：this.state
});
如果（isValid！==true）{
这是我的国家({
错误：{…this.state.errors，[name]：isValid}
});
}
否则{
这是我的国家({
错误：{…this.state.errors，[名称]：未定义}
});
}
}
handleSubmit=（e）=>{
e、 预防默认值（）；
SignInValidator.validate（此.state）
。然后（数据=>{
this.login（）；
})
.catch（错误=>{
this.setState（{errors}）；
});
}
登录=（e）=>{
var email=encodeURI（this.state.email）；
var password=encodeURI（this.state.password）；
获取（`/login/login？用户名=${email}和密码=${Password}`）
。然后（数据=>{
控制台日志（数据）；
警报（“登录成功！”）；
//导航到仪表板
this.setState（initState）；
})
.catch（e=>{
警报（“登录失败”）；
控制台错误（e）；
});
};
render（）
{
const{classes}=this.props；
返回(
登录
登录
忘记密码了？
{“没有帐户？注册”}
你好
);
}
}
导出默认连接（）；

说明 MUI模态分量产生错误的原因

TypeError:无法读取未定义的属性“hasOwnProperty”

是因为您没有在小时候提供JSX组件

---

解决方案 从此改变

<Modal open={true}>
  Hello
</Modal>

---

该错误意味着

props.children.props

未定义，这给了调试思路。

显示错误的堆栈跟踪。将Modal的内部内容放入div中正是使代码正常工作所需的。谢谢，搞定了。谢谢你救了我的命$$

<Modal open={true}>
  <div>  
    Hello
  </div>
</Modal>

function getHasTransition(props) {
  return props.children ? props.children.props.hasOwnProperty('in') : false;
}