如何有条件地呈现对话框Material-ui

Question

我试图显示一个基于阿波罗钩子返回的数据的对话框，在那里我必须检查其中一个值是否匹配id。

当checker===true我想在渲染时打开对话框，当用户单击Close按钮时，对话框应该关闭。

const DialogComponent = () => {

const {data, loading, error} = useQuery(GET_QUERY_DATA)
const [isDialogOpen, setIsDialogOpen] = useState(false);
const checker = data && data.getData.some((item_data.id === id))
const closeDialog = () => {
setIsDialogOpen(false)
}

if(checker) {
setIsDialogOpen(true)
}
return( 
<Dialog
open={isDialogOpen}
close={closeDialog}>
// dialog content here
<DialogActions>
<Button onClick={closeDialog}> Close </Button>
</DialogActions>
</Dialog>
)}

以上错误与太多的重新渲染。

我已经尝试过条件渲染，然而，似乎对话框组件从未打开，即使checker===true(下面)。

const DialogComponent = () => {

const {data, loading, error} = useQuery(GET_QUERY_DATA)
const [isDialogOpen, setIsDialogOpen] = useState(false);
const checker = data && data.getData.some((item_data.id === id))
const closeDialog = () => {
setIsDialogOpen(false)
}

if(checker) {
setIsDialogOpen(true)
}
return( 
{checker && <Dialog
open={isDialogOpen}
close={closeDialog}>
// dialog content here
<DialogActions>
<Button onClick={closeDialog}> Close </Button>
</DialogActions>
</Dialog>
)}}

我也尝试用检查器即open={checker}替换打开的prop值，但是，即使单击Close按钮，对话框也永远无法关闭。

感谢您的帮助。

Answer 1

关闭按钮关闭对话框，它将在下次渲染时再次打开

if(checker) {
setIsDialogOpen(true)
}

你可以这样做:

<Dialog
open={isDialogOpen && checker}
close={closeDialog}>
<DialogActions>
<Button onClick={closeDialog}> Close </Button>
</DialogActions>
</Dialog>

Answer 2

我在你的代码中看到的一个问题是关于这一部分:

if (checker) {
setIsDialogOpen(true)
}

每当组件中的状态更新时，都会再次调用组件函数以更新后的状态重新呈现它。因此，再次执行上面的代码片段，如果checker为true，则再次更新状态，然后它会一次又一次地重新呈现。

尝试像这样将上面的代码片段包装在React.useEffet()中:

React.useEffect(() => {
setIsDialogOpen(checker)
}, [checker])