React Material UI Dialog Failed 道具类型值为“未定义”答案

【问题标题】：React Material UI Dialog Failed prop type value is `undefined`React Material UI Dialog Failed 道具类型值为“未定义”
【发布时间】：2021-02-18 10:02:12
【问题描述】：

张贴在我的智慧结束。我不是开发者，这只是一个家庭项目。

我试图构建一个可重用的对话框（它只是询问“你确定吗？），并且不断出错。

现在，我以 Material UI 为例

Material UI Dialog

和演示

Material UI Dialog Demo

并自己实现了一个副本：

DialogTest.js

import React from 'react';

import Dialog from '@material-ui/core/Dialog';
import Button from '@material-ui/core/Dialog';
import DialogActions from '@material-ui/core/DialogActions';
import DialogContent from '@material-ui/core/DialogContent';
import DialogContentText from '@material-ui/core/DialogContentText';
import DialogTitle from '@material-ui/core/DialogTitle';


export default function DialogTest() {

    const [open, setOpen] = React.useState(false);
  
    const handleClickOpen = () => {
      setOpen(true);
    };
  
    const handleClose = () => {
      setOpen(false);
    };

    return (
        <div>
            <h2>Dialog</h2>
            <div>
                <button onClick={handleClickOpen}>Open Dialog</button>
            </div>
            <Dialog
                open={open}
                onClose={handleClose}
                aria-labelledby="alert-dialog-title"
                aria-describedby="alert-dialog-description"
            >
                <DialogTitle id="alert-dialog-title">Boom</DialogTitle>
                <DialogContent>
                    <DialogContentText id="alert-dialog-description">
                        Blah
                    </DialogContentText>
                </DialogContent>
                <DialogActions>
                    <Button onClick={handleClose} color="primary">
                        Disagree
                    </Button>
                    <Button onClick={handleClose} color="primary" autoFocus>
                        Agree
                    </Button>
                </DialogActions>
            </Dialog>
        </div>
    );
}

import React from 'react';
import DialogTest from './DialogTest';

App.js：

function App() {
  return (
    <DialogTest/>
  );
}

export default App;

除了更改文本之外，我看不出有什么不同，但在打开对话框时出现以下错误（并且按钮不呈现）：

警告：失败的道具类型：道具open在ForwardRef(Dialog)中标记为必填，但其值为undefined。

我在实现我的可重用解决方案时遇到了这个错误，这就是我将其剥离回上述代码的原因。

我检查了 React 调试工具，他们说 Dialog 定义了一个“打开”属性。

所以我很茫然:(

有没有人知道发生了什么？我的猜测是我有一个愚蠢的错误，但我找不到它。

【问题讨论】：

您的按钮导入不正确。将其更改为import { Button } from "@material-ui/core";
天哪，我很抱歉！！！！我已经盯着这个看了好几个小时了！非常感谢。
的警告是因为你没有通过 prop open 来避免的。警告你可以像这样传递或者你可以使用 useState 来保存值
@DILEEPTHOMAS - 不，我正在通过对话框中的打开，它在状态中声明。 szczocik 的答案是正确的问题 - 由于导入不正确，我有效地嵌套了对话框。嵌套的对话框然后没有打开的道具集。

标签： reactjs dialog material-ui

【解决方案1】：

这确实是我的错误 - 我在顶部的导入不正确。

import Button from '@material-ui/core/Dialog';

应该是

import Button from '@material-ui/core/Button;

感谢回答的好心人。

【讨论】：