关闭 React Alert 组件的 Snackbar Onclick

Question

我有一个 React Snackbar 组件，我在父组件中调用了它，我根据严重性、消息传递了 props 并打开到 Snackbar 组件。我可以访问子 Snackbar 组件中的道具。但是，当关闭 Snackbar 或尝试关闭它时，我收到错误 TypeError: setOpen is not a function。

 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>
);
}

Answer 1

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

所以

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

应该是

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>
  );
}