警告：道具类型失败：提供给“ForwardRef(Dialog)”的“function”类型的无效道具“open”，应为“boolean”。在对话框

Question

想法是在对话框中显示区域概览，然后在对话框关闭后显示表格。但是，当我单击关闭时，我似乎无法摆脱该框。单击按地区选项（标记为黄色）时会出现对话框，然后会弹出一个下拉列表（标记为红色）。一旦选择了下拉列表中的值，就会出现对话框。尽管出现了对话框，但我似乎无法以某种方式关闭它。控制台给出了我在标题中给出的错误。截图和代码如下：

代码如下：

import React, { useState } from "react";
import './advance_filter.css';
import DistrictFilter from "../../widgets/filter_dropdowns/district_filter/district_filter";
import Dialog from "@material-ui/core/Dialog";
import { DialogActions, DialogContent, DialogTitle } from "@material-ui/core";

const AdvanceFilterScreen = () => {

    const [byDistrictFilter, setByDistrictFilter] = useState(false);     //This is the hook that selects the By District option
    const [district, setDistrict] = useState('');                       //This selects the value from the Dropdown

    const [districtDialogOpen, setDistrictDialogOpen] = useState(false);  //This was meant for opening and closing the dialog box


    const districtFilter = () => {
        setByDistrictFilter(prev => !prev);
        setFilterButtonValue('');
        setDistrict('')
    }

    const openDialog = () => {
        setDistrictDialogOpen(prev => !prev)
    }

    const closeDialog = () => {
        setDistrictDialogOpen(prev => !prev);
    }

    return (
        <div className="advanceFilterScreen">
            <div className="navBarFilter">
                <NavBar></NavBar>
            </div>
            <div className="chooseFilters">
                <div className="chooseColumn">
                    <div className="caption">Choose Filters (Upto 5 filters at a time)</div>
                    <div className="filterOptions">
                        <div onClick={districtFilter}>
                            <div className={byDistrictFilter ? "districtSelectedFilter" : "byDistrictFilter"}>By District</div>
                        </div>
                    </div>
                </div>
            </div>

            <div className={byDistrictFilter ? "filterDropdowns" : "noFilter"}>
                <div className="filterClass">
                    {byDistrictFilter ? <div style={{ marginRight: "15px" }}>
                        {/* This shows the District Dropdown */}
                        <DistrictFilter setDistrict={setDistrict}></DistrictFilter>
                    </div> : null}
                </div>
                <div>
                    {district ? <Dialog open={openDialog} onClose={closeDialog}>
                        <DialogTitle className="districtOverview">{"District Overview"}</DialogTitle>
                        <DialogContent>
                            <div className="overAll">
                                {/* This component shows the overview on the Dialog Box */}
                                <DistrictTable district={district} setFilterButtonValue={setFilterButtonValue} ></DistrictTable>
                            </div>
                        </DialogContent>
                        <DialogActions>
                            <div className="closeButton" onClick={closeDialog}>Close</div>
                        </DialogActions>
                    </Dialog>
                        : <FilterSearchButton district={district}></FilterSearchButton>}
                </div>
            </div>
            <div style={{ marginTop: "50px" }}>
                <Table buttonValue={buttonValue}></Table>
            </div>
        </div>
    );
};

export default AdvanceFilterScreen;

如果有人需要 CSS 文件进行测试：

.advanceFilterScreen {
    display: flex;
    flex-direction: column;
}

.navBarFilter {
    background-color: rgb(52, 171, 245);
}

.chooseFilters {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 80px;
    background-color: rgb(52, 171, 245);
}

.chooseColumn {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    width: 75%;
    height: 100%;
}

.caption {
    font-weight: bold;
    margin-top: 10px;
    padding-left: 10px;
    color: white;
    font-weight: bold;
}

.filterOptions {
    display: flex;
    width: 100%;
    height: 100%;
    padding: 0 5px;
}

.byNameFilter {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    height: 30px;
    margin-right: 5px;
    margin-top: 10px;
    border-radius: 10px;
    box-shadow: 1px 2px 4px 1px gray;
    background-color: white;
    cursor: pointer;
    padding: 0 10px;
}

.nameSelectedFilter {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    height: 30px;
    margin-right: 5px;
    margin-top: 10px;
    border-radius: 10px;
    background-color: gray;
    cursor: pointer;
    padding: 0 10px;
}

.byDateFilter {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    height: 30px;
    margin-right: 5px;
    margin-top: 10px;
    border-radius: 10px;
    box-shadow: 1px 2px 4px 1px gray;
    background-color: white;
    cursor: pointer;
    padding: 0 10px;
}

.dateSelectedFilter {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    height: 30px;
    margin-right: 5px;
    margin-top: 10px;
    border-radius: 10px;
    background-color: gray;
    cursor: pointer;
    padding: 0 10px;
}

.byCategoryFilter {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    height: 30px;
    margin-right: 5px;
    margin-top: 10px;
    border-radius: 10px;
    box-shadow: 1px 2px 4px 1px gray;
    background-color: white;
    cursor: pointer;
    padding: 0 10px;
}

.categorySelectedFilter {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    height: 30px;
    margin-right: 5px;
    margin-top: 10px;
    border-radius: 10px;
    background-color: gray;
    cursor: pointer;
    padding: 0 10px;
}

.byDistrictFilter {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    height: 30px;
    margin-right: 5px;
    margin-top: 10px;
    border-radius: 10px;
    box-shadow: 1px 2px 4px 1px gray;
    background-color: white;
    cursor: pointer;
    padding: 0 10px;
}

.districtSelectedFilter {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    height: 30px;
    margin-right: 5px;
    margin-top: 10px;
    border-radius: 10px;
    background-color: gray;
    cursor: pointer;
    padding: 0 10px;
}

.byStatesFilter {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    height: 30px;
    margin-right: 5px;
    margin-top: 10px;
    border-radius: 10px;
    box-shadow: 1px 2px 4px 1px gray;
    background-color: white;
    cursor: pointer;
    padding: 0 10px;
}

.stateSelectedFilter {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    height: 30px;
    margin-right: 5px;
    margin-top: 10px;
    border-radius: 10px;
    background-color: gray;
    cursor: pointer;
    padding: 0 10px;
}

.bySerialNumberFilter {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    height: 30px;
    margin-right: 5px;
    margin-top: 10px;
    border-radius: 10px;
    box-shadow: 1px 2px 4px 1px gray;
    background-color: white;
    cursor: pointer;
    padding: 0 10px;
}

.serialNumberSelectedFilter {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    height: 30px;
    margin-right: 5px;
    margin-top: 10px;
    border-radius: 10px;
    background-color: gray;
    cursor: pointer;
    padding: 0 10px;
}

.byIssueFilter {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    height: 30px;
    margin-right: 5px;
    margin-top: 10px;
    border-radius: 10px;
    box-shadow: 1px 2px 4px 1px gray;
    background-color: white;
    cursor: pointer;
    padding: 0 10px;
}

.issueSelectedFilter {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    height: 30px;
    margin-right: 5px;
    margin-top: 10px;
    border-radius: 10px;
    background-color: gray;
    background-color: white;
    cursor: pointer;
    padding: 0 10px;
}

.filterDropdowns {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    height: 200px;
    background-color: rgb(52, 171, 245);
    /* margin-top: 10px; */
}

.noFilter {
    display: none;
}

.filterClass {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    /* flex-direction: row; */
    /* width: 100%;
    height: 50px; */
    /* background-color: yellow; */
}

.districtOverview {
    display: flex;
    justify-content: center;
    align-items: center;
}

.overAll {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding-left: 15px;
    padding-top: 5px;
    /* background-color: red; */
}

.closeButton {
    display: flex;
    justify-content: flex-end;
    padding-right: 30px;
    align-items: center;
    width: 200px;
    height: 50px;
    color: rgb(52, 171, 245);
    /* font-weight: bold; */
    cursor: pointer;
    font-size: 20px;
}

/* .searchFilterButton {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 150px;
    height: 30px;
    margin-top: 50px;
    background-color: rgb(52, 171, 245);
    box-shadow: 1px 2px 4px 1px gray;
    border-radius: 5px;
    cursor: pointer;
    background-color: green;
    color: white;
    font-weight: bold;
} */

Answer 1

传递给对话框的 open 属性并不是一个函数。它应该是一个布尔值。当 District 具有真实值时，District Overview 对话框的触发器应该是 District 的状态。因此，您要么使用三元运算符district ? /* dialog */ : /* filter button */ 进行渲染并拥有 oepn 属性在初始渲染时设置为 true，或者您立即使用其他节点渲染对话框并将其 open 属性设置为 open={Boolean(district)}

const districtFilter = () => {
  setByDistrictFilter(prev => !prev);
  setFilterButtonValue('');
}

const closeDialog = () => {
  setDistrict('')
}

<div>
  {district ? (
    <Dialog open onClose={closeDialog}>
      {/* ... */}
    </Dialog>
  ) : (
    <FilterSearchButton district={district}></FilterSearchButton>
  )}
</div>

或

<div>
  <Dialog open={Boolean(district)} onClose={closeDialog}>
    {/* ... */}
  </Dialog>
  
  {district && <FilterSearchButton district={district}></FilterSearchButton>}
</div>