如何有條件地渲染對話框 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])