是什么导致了 notstack 这个 enqueue snapbar 错误？

Question

我正在尝试使用 notistack 库中的 useSnack 钩子，但我不断收到此错误

类型错误：无法解构 'Object(...)(...)' 的属性 'enqueueSnackbar'，因为它未定义。

这是代码：

import React, { useContext, useEffect } from "react";
import AlertContext from "../context/alert/alertContext";
import { SnackbarProvider, useSnackbar } from "notistack";

const Alerts = (props) => {
  const alertContext = useContext(AlertContext);
  // This line below is where the error seems to be
  const { enqueueSnackbar } = useSnackbar();
  useEffect(() => {
    alertContext.msg !== "" &&
      enqueueSnackbar(alertContext.msg, {
        variant: alertContext.type,
      });
  }, [alertContext]);
  return <SnackbarProvider maxSnack={4}>{props.children}</SnackbarProvider>;
};

export default Alerts;

Answer 1

useSnackbar钩子可从SnackbarProvider.

因此，您不能在与SnackbarProvier.

import AlertContext from "../context/alert/alertContext";
import { SnackbarProvider } from "notistack";

const Alerts = (props) => {
  const alertContext = useContext(AlertContext);
  const providerRef = React.useRef();

  useEffect(() => {
    alertContext.msg !== "" &&
      providerRef.current.enqueueSnackbar(alertContext.msg, {
        variant: alertContext.type,
      });
  }, [alertContext]);
  return <SnackbarProvider ref={providerRef} maxSnack={4}>
       {props.children}
       </SnackbarProvider>;
};

export default Alerts;