从父组件中,我调用一个对话框AlertDialog,并发送带有值为true的道具openIt的
这是父组件
...
{this.state.open && (
<Dialog extends openit={true} />
) }
...
子组件对话框
import ...;
...
let isOpen = false;
class Dialog extends extends Component {
constructor(props) {
super(props);
this.state = {
open: false,
};
}
componentDidMount() {
}
static getDerivedStateFromProps(props, state) {
if (state.open === false && isOpen === false) {
state.open = props.openIt;
return state.open;
}
return null;
}
handleClose = () => {
this.setState({ open: false });
isOpen = true;
};
render() {
const { open } = this.state;
return (
<Dialog open={open} >
</Dialog>
...
在此方法中,我将props传递给openIt以使其处于打开状态,因此该方法将返回true作为open的值,并显示对话框。
当我单击“确定”以关闭对话框时,将触发方法handleClose,并且open的值将为false,但问题getDerivedStateFromProps将再次被触发 第二次触发
{this.state.open && (
<Dialog extends openit={true} />
) }
因为状态为true,所以不会显示模态 我不知道如何解决这个问题