Reactjs 尝试编写一个react钩子来复制一个字符串，然后显示一个警报。它可以工作，但只运行一次

作为我网站的一部分，我正试图让它进入我有按钮的地方，用户可以点击，它会将我的联系信息复制到剪贴板，然后显示一个警报，验证项目是否已被复制

我正在使用snackbar的材质ui，并使用剪贴板复制地址。下面是我的作品。这些按钮可以很好地复制地址。这是完美无瑕的

然而，警报是主要问题

第一个问题是，这两个警报在应用程序首次加载时都会出现，我只希望它们在按下按钮时显示

第二个问题是，当按下一个按钮时，它们确实会工作——但这只是第一次。如果我单击“复制电子邮件”，它会复制电子邮件并发出警报。如果我单击“复制linkedin”，它会复制linkedin地址并发出警报。如果我返回并再次单击“复制电子邮件”，它将复制电子邮件，但不会发出警报

我不明白为什么钩子不会运行一次警报。如有任何建议，将不胜感激

function Contact() {

const [isCopiedEmail, setCopiedEmail] = useClipboard("myemailaddress@gmail.com");

useEffect(() => {
    setOpenEmail(true);
    console.log("Email")}, 
    [isCopiedEmail]
    )

const [isCopiedLinkedIn, setCopiedLinkedIn] = useClipboard("https://www.linkedin.com/in/mylinkedinaddress");

useEffect(() => {
    setopenLinkedIn(true);
    console.log("LinkedIn")}, 
    [isCopiedLinkedIn]
    )

function Alert(props) {
    return <MuiAlert elevation={6} variant="filled" {...props} />;
  }
  
  const useStyles = makeStyles((theme) => ({
    root: {
      width: '100%',
      '& > * + *': {
        marginTop: theme.spacing(2),
      },
    },
  }));

  const [openLinkedIn, setopenLinkedIn] = useState(false);

  const handleCloseLinkedIn = (event, reason) => {
      if (reason === 'clickaway') {
      return;
  }
  setopenLinkedIn(false);
};

  const [openEmail, setOpenEmail] = useState(false);

  const handleCloseEmail = (event, reason) => {
    if (reason === 'clickaway') {
      return;
    }
    setOpenEmail(false);
  };

return (
    <Container className="background3">
    <Row>
        </Col>
        <Col xs={12} md={4}>
                <Button variant="contained" size="large" color="secondary" onClick={setCopiedEmail}>Copy to Clipboard</Button>
        </Col>
        <Col xs={12} md={4}>
         <Button variant="contained" size="large" color="secondary" onClick={setCopiedLinkedIn}>Copy to Clipboard</Button>

        </Col>

        <Snackbar open={openLinkedIn} autoHideDuration={2000} onClose={handleCloseLinkedIn}>
        <Alert onClose={handleCloseLinkedIn} severity="success">
        My LinkedIn URL successfully copied!
        </Alert>
        </Snackbar>

        <Snackbar open={openEmail} autoHideDuration={2000} onClose={handleCloseEmail}>
        <Alert onClose={handleCloseEmail} severity="success">
        My e-mail address successfully copied!
        </Alert>
        </Snackbar>
        
    </Row>
    </Container>
)
}

export default Contact

功能联系人（）{
const[iscopiedmail，setcopiedmail]=使用剪贴板（“myemailaddress@gmail.com");
useffect（（）=>{
setOpenEmail（true）；
console.log（“Email”）}，
[IscopiedMail]
)
const[isCopiedLinkedIn，setCopiedLinkedIn]=使用剪贴板（“https://www.linkedin.com/in/mylinkedinaddress");
useffect（（）=>{
setopenLinkedIn（真）；
console.log（“LinkedIn”）}，
[isCopiedLinkedIn]
)
功能警报（道具）{
返回；
}
const useStyles=makeStyles（（主题）=>({
根目录：{
宽度：“100%”，
'& > * + *': {
marginTop：主题。间距（2），
},
},
}));
const[openLinkedIn，setopenLinkedIn]=useState（false）；
const handleCloseLinkedIn=（事件、原因）=>{
如果（原因==‘单击离开’）{
返回；
}
setopenLinkedIn（假）；
};
const[openEmail，setOpenEmail]=useState（false）；
const handleCloseEmail=（事件、原因）=>{
如果（原因==‘单击离开’）{
返回；
}
setOpenEmail（假）；
};
返回(
复制到剪贴板
复制到剪贴板
我的LinkedIn URL已成功复制！
已成功复制我的电子邮件地址！
)
}
导出默认联系人

由于以下影响，在加载应用程序时会出现警报：

  useEffect(() => {
    setOpenEmail(true);
    console.log("Email");
  }, [isCopiedEmail]);

我关注的是

iscopiedmail

，但

isCopiedLinkedIn

也是如此。无论

iscopiedmail

的值是多少，这都会在组件装载时运行。而且，您永远不会重置

iscopiedmail

的值，因此在它变为

true

后，效果将不会再次运行

由于您在调用

setCopiedEmail

时已经在调用函数，因此我将同时调用

setOpenEmail（true）

，并删除这些效果：

function Contact() {
  const [isCopiedEmail, setCopiedEmail] = useClipboard(
    "myemailaddress@gmail.com"
  );

  const [openEmail, setOpenEmail] = useState(false);
  const handleCloseEmail = (event, reason) => {
    if (reason === "clickaway") {
      return;
    }
    setOpenEmail(false);
  };

  const handleCopiedEmail = () => {
    setCopiedEmail();
    setOpenEmail(true);
  };

  // ...

  return (
    <Container className="background3">
      <Row>
        <Col xs={12} md={4}>
          <Button
            variant="contained"
            size="large"
            color="secondary"
            onClick={handleCopiedEmail}
          >
            Copy to Clipboard
          </Button>
        </Col>
        {/* ... */}
      </Row>
    </Container>
  );
}

功能联系人（）{
const[iscopiedmail，setcopiedmail]=使用剪贴板(
"myemailaddress@gmail.com"
);
const[openEmail，setOpenEmail]=useState（false）；
const handleCloseEmail=（事件、原因）=>{
如果（原因==“单击离开”）{
返回；
}
setOpenEmail（假）；
};
const handleCopiedEmail=（）=>{
setCopiedMail（）；
setOpenEmail（true）；
};
// ...
返回(
复制到剪贴板
{/* ... */}
);
}

回想起来，这似乎非常明显。非常感谢你抽出时间来帮助我。我真的很感激。