尝试让 Button 复制 URL 并使用 React Hooks 呈现小吃栏

问题描述

我仍在学习 React 钩子。正如标题所述，当用户点击标有“复制到剪贴板”的按钮时，我当然希望它复制 url（它确实如此），然后我试图使用效果，以便它还显示一个小吃栏（来自 materialui）告诉用户网站已成功复制到剪贴板。

我收到错误：

“期望赋值或函数调用，却看到一个表达式 no-unused-expressions”

我知道这与我如何在 useEffect 中调用“setopenWebsiteSnackbar”有关。我确定有一个简单的解决方案，我只是不明白。

const [iscopiedWebsite,setcopiedWebsite] = useClipboard("https://www.websiteIwanttocopy.com");

useEffect(() => {setopenWebsiteSnackbar,console.log("Website copied")},[iscopiedWebsite]
    )

  const [openWebsiteSnackbar,setopenWebsiteSnackbar] = React.useState(false);
  const handleClickWebsite = () => {
  setopenWebsiteSnackbar(true);
  };
  const handleCloseWebsite = (event,reason) => {
      if (reason === 'clickaway') {
      return;
  }
  setopenWebsiteSnackbar(false);
};


return (
<Button variant="contained" size="large" color="secondary" onClick={setcopiedWebsite}>copy to Clipboard</Button>

<div className={classes.root}>

<Snackbar open={openWebsiteSnackbar} autoHideDuration={6000} onClose={handleCloseWebsite }>
        <Alert onClose={handleCloseWebsite } severity="success">
        Website URL successfully copied!
        </Alert>
        </Snackbar>

)

解决方法

setopenWebsiteSnackbar 是一个函数。您当前在其他地方调用该函数，例如：

setopenWebsiteSnackbar(true);

但是在您的 useEffect 中您没有调用它，您只是对它有一个未使用的引用：

setopenWebsiteSnackbar,

逗号在那里也没有多大意义。您是要调用该函数吗？：

useEffect(() => {
  setopenWebsiteSnackbar(true);
  console.log("Website Copied");
},[isCopiedWebsite]);

基本上，如果您希望“效果”是小吃栏打开，那么您需要调用该函数并更新该状态以执行此操作。