如何有条件地渲染对话框 Material-ui

Question

我试图根据从 apollo hook 返回的数据显示一个对话框，在那里我必须检查其中一个值是否与 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 （如下）时，Dialog 组件也永远不会打开。

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 道具值，即open={checker}但是，即使单击Close按钮，对话框也永远无法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 为真，状态会再次更新，然后它会一次又一次地重新刷新。

尝试将上面的代码片段包装在React.useEffet()如下所示：

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