anchorEl ref 在第一次渲染时未定义Material-UI / React

问题描述

在我的功能组件的返回方法中，我为我试图将其设置为 Material-UI 菜单的 anchorEl 的按钮元素分配了一个引用。我遇到的问题是它在第一次渲染时总是未定义的，然后它就可以工作了。我不知道如何创建一个 useEffect 来防止未定义的行为，或者如何准确地构造它以确保 anchorEl 不会被渲染为未定义的。

这是应用程序的返回：

  return(
    currentUser !== null && userPurchases !== null ? 
      <>
        <p>Welcome,{ currentUser.displayName || currentUser.email }!</p>
        <Typography variant="h3" style={{marginBottom: '1em'}}>Purchased Products:</Typography>
        { userPurchases && Object.values(userPurchases).map((product,prodIdx) => {
          const purchase_date = new Date(product.purchase_date.seconds * 1000).toLocaleDateString()
          return (
            <motion.div key={product.uid}>
              <Accordion style={{backgroundColor: '#efefef'}}>
                <AccordionSummary expandIcon={<ExpandMoreIcon style={{fontSize: "calc(2vw + 10px)"}}/>} aria-controls={`${product.title} accordion panel`}>
                  <Grid container direction="row" alignItems="center">
                    <Grid item xs={3}><img src={product.main_image} style={{ height: '100%',maxHeight: "200px",width: '100%',maxWidth: '150px' }}/></Grid>
                    <Grid item xs={6}><Typography variant="h6">{product.title}</Typography></Grid>
                    <Grid item xs={3}><Typography variant="body2"><b>Purchase Date:</b><br />{purchase_date}</Typography></Grid>
                  </Grid>
                </AccordionSummary>
                <AccordionDetails style={{backgroundColor: "#e5e5e5",borderTop: 'solid 6px #5e5e5e',padding: '0px'}}>
                  <Grid container direction="column" className={styles[`product-grid`]}>
                    {Object.entries(product.packs).map(([pack,downloads],packIdx) => {
                      // The pack object right now
                      return (
                        <Grid key={ `${pack}-container` } container direction="row" alignItems="center" justify="space-between" style={{padding: '2em 1em'}}>
                          <Grid item xs={4} style={{ textTransform: 'uppercase',backgroundColor: 'transparent' }}><Typography align="left" variant="subtitle2" style={{fontSize: 'calc(.5vw + 10px)'}}>{pack}</Typography></Grid>
                          <Grid item xs={4} style={{ backgroundColor: 'transparent' }}><Typography variant="subtitle2" style={{fontSize: "calc(.4vw + 10px)"}}>{`Remaining: ${downloads.downloads_remaining}`}</Typography></Grid>
                          <Grid item xs={4} style={{ backgroundColor: 'transparent' }}>
                            <ButtonGroup variant="contained" fullWidth >
                              <Button id={`${pack}-btn`} disabled={generatingURL} ref={(el) => downloadRefs.current[prodIdx][packIdx] = el} onClick={(e) => openDownloads(e,prodIdx,packIdx)} color='primary'>
                                <Typography variant="button" style={{fontSize: "calc(.4vw + 10px)"}} >{!generatingURL ? 'Downloads' : 'Processing'}</Typography>
                              </Button>
                            </ButtonGroup>
                            <ClickAwayListener key={`${product.product_prefix}-${pack}`} mouseEvent="onMouseDown" onClickAway={handleClose}>
                              <div>
                                <Menu anchorOrigin={{ vertical: 'top',horizontal: 'right' }} transformOrigin={{ vertical: 'top',horizontal: 'right' }} id={`${product.product_prefix}-${pack}-variations`} open={Boolean(openPanel == downloadRefs.current[prodIdx][packIdx])} anchorEl={downloadRefs.current[prodIdx][packIdx]}>
                                  {product.variations && Object.entries(product.variations).map(([variation,link]) => {
                                    return (
                                      <MenuItem key={`${product.product_prefix}-${variation}-${pack}`} onClick={() => generateLink(product.product_prefix,link,pack)}>{ variation }</MenuItem>
                                    )
                                  })}
                                  <MenuItem onClick={() => generateLink(product.product_prefix,null,pack)}>All</MenuItem>
                                </Menu>
                              </div>
                            </ClickAwayListener>
                          </Grid>
                        </Grid>
                      )}
                    )}
                  </Grid>
                </AccordionDetails>
              </Accordion>
            </motion.div>
          )
        }) 
      }
    </>
    :
    <>
      <p>No user Signed in</p>
      <LoginForm />
    </>
  )
}

正如我所说，在第一次渲染后，一切都完全按预期工作，因此可以安全地假设除 ref 之外的一切都正常工作。任何建议或帮助将不胜感激。这是我目前还没有使用过的用例。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）