如何使用 React Hooks 在 React 中填充对话

如何解决如何使用 React Hooks 在 React 中填充对话

我需要使用 Material UI 对话框显示一些信息。在 useEffect 钩子中调用 handleOpen 函数会导致对话框在页面打开时默认打开。有人可以帮助我展示如何仅在单击按钮时填充对话框吗？请注意 postId 作为 props 从父组件传递。提前致谢

 import { useState,useEffect } from 'react'
 import { useSelector,usedispatch } from 'react-redux'

 import { getSinglePost } from '../../store/actions/postActions'

 //MUI Components
 import { Dialog,DialogHeader,Button,DialogContent,DialogActions,Grid,Typography,IconButton} 
 from '@material-ui/core'
 import LaunchIcon from '@material-ui/icons/Launch';


const PostDialog = ({postId}) => {
    const [ open,setopen ] = useState(false)

    const post = useSelector(state => state.posts.post)

    const dispatch = usedispatch()

    useEffect(() => {
       handleopen()
    },[])


const handleOpen = () => {
    setopen({ open: true })
    dispatch(getSinglePost(postId))
}

const handleClose = () => {
    setopen({ open: false })
}

return (
    <div>
        <Button onClick={handleOpen}>
            <LaunchIcon fontSize="small" color="primary" />
        </Button>
        <Dialog
        open={open}
        onClose={handleClose} 
        fullWidth
        maxWidth="sm"
        >
            <DialogContent>
                <Grid container>
                    <Grid item sm={5}>
                        {/* <img src={userImage} width="150" /> */}
                    </Grid>
                    <Grid>
                    <Typography variant="h6">@{post.handle}</Typography>
                    <Typography variant="h6">{post.job_title}</Typography>
                    <Typography variant="body2">{post.long_description}</Typography>

                    </Grid>


                </Grid>
            </DialogContent>

        </Dialog>
        
      </div>
   )
 }


 export default PostDialog