Javascript 单击React Alert组件后关闭Snackbar

我有一个React Snackbar组件，我在父组件中调用了该组件，并根据严重性、消息和开放性向Snackbar组件传递了道具。我可以访问儿童Snackbar组件中的道具。但是，当关闭Snackbar或试图关闭它时，我得到一个错误

TypeError:setOpen不是一个函数

 export default function MessageSnackbars(props) {
 const classes = useStyles();
 const [setOpen] = React.useState(false);
 const message = props.message;
 const severity = props.severity;
 const open = props.open;

 const handleClose = (event, reason) => {
    if (reason === 'clickaway') {
    return;
 }

setOpen(false);
};

return (
<div className={classes.root}>
  <Snackbar
    autoHideDuration={6000}
    onClose={handleClose}
    open={open}
  >
    <Alert
      onClose={handleClose}
      severity={severity}
    >
      {message}
    </Alert>
  </Snackbar>
</div>
);
}

导出默认功能消息snackbar（道具）{
const classes=useStyles（）；
const[setOpen]=React.useState（false）；
const message=props.message；
常量严重性=道具严重性；
const open=props.open；
const handleClose=（事件、原因）=>{
如果（原因==‘单击离开’）{
返回；
}
setOpen（假）；
};
返回(
{message}
);
}

数组中的第一项是状态，第二项是状态更新程序函数

所以

应该是

const [ ,setOpen] = React.useState(false);

此外，您还依赖于道具中的

open

，来处理snackbar组件的状态（打开/关闭）。因此，除非在父级中更新props.open，否则它不会真正关闭组件

另一种方法是在组件中保持

props.open

同步，这将按预期工作

export default function MessageSnackbars(props) {
  const classes = useStyles();
  const {message, severity, open} = props;
  // Uses props.open to keep track of the open state 
  const [isLocalOpen, setIsLocalOpen] = React.useState(open);

  // Used to keep the props.open in sync
  // as part of the local state
  useEffect(() => {
    setIsLocalOpen(open);
  }, [open]);

  const handleClose = (event, reason) => {
    if (reason === 'clickaway') {
      return;
    }

    setIsLocalOpen(false);
  };

  return (
    <div className={classes.root}>
      <Snackbar autoHideDuration={6000} onClose={handleClose} open={isLocalOpen}>
        <Alert onClose={handleClose} severity={severity}>
          {message}
        </Alert>
      </Snackbar>
    </div>
  );
}

导出默认功能消息snackbar（道具）{
const classes=useStyles（）；
const{message，severity，open}=props；
//使用props.open跟踪打开状态
const[isLocalOpen，setIsLocalOpen]=React.useState（打开）；
//用于保持道具同步打开
//作为地方政府的一部分
useffect（（）=>{
Setislocalpen（开放）；
}，[开放]；
const handleClose=（事件、原因）=>{
如果（原因==‘单击离开’）{
返回；
}
SetisLocalpen（假）；
};
返回(
{message}
);
}

这会解决错误，但不会关闭或关闭Snackbar。任何帮助关闭Snackbar的人都将不胜感激。这是众所周知的。将Snackbar的当前状态保留在同一组件中，并在必要时进行更新。正确。这样您就可以管理snackbar的状态。如果您不想这样做，那么您必须调用父对象上的方法，该父对象是

open

的所有者，该父对象将更新状态。在这种情况下，发生的情况是，一旦您关闭snackbar并在不刷新浏览器的情况下再次发出请求，snackbar将不会显示，除非您刷新浏览器。因此，最有效的方法是让所有者的父母更新状态。我整晚都在尝试第二种方法，以便让Snackbar显示多次，而不是仅显示一次。非常感谢家长提供的任何帮助我处理国家事务的代码@苏珊特

export default function MessageSnackbars(props) {
  const classes = useStyles();
  const {message, severity, open} = props;
  // Uses props.open to keep track of the open state 
  const [isLocalOpen, setIsLocalOpen] = React.useState(open);

  // Used to keep the props.open in sync
  // as part of the local state
  useEffect(() => {
    setIsLocalOpen(open);
  }, [open]);

  const handleClose = (event, reason) => {
    if (reason === 'clickaway') {
      return;
    }

    setIsLocalOpen(false);
  };

  return (
    <div className={classes.root}>
      <Snackbar autoHideDuration={6000} onClose={handleClose} open={isLocalOpen}>
        <Alert onClose={handleClose} severity={severity}>
          {message}
        </Alert>
      </Snackbar>
    </div>
  );
}