是什么导致 notistack 出现此排队小吃店错误？

Question

我正在尝试使用 notistack 库中的 useSnack 挂钩，但我一直收到此错误

TypeError: Cannot destructure property 'enqueueSnackbar' of 'Object(...)(...)' as it is undefined.

代码如下：

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;

Answer 2

使用 SnapBar 提供程序包装您的索引文件：

//index.js
import { SnackbarProvider } from "notistack";

const Index = () => (
    <SnackbarProvider maxSnack={1} preventDuplicate>
        index
    </SnackbarProvider>
)

export default Index


//jsx file
import { useSnackbar } from "notistack";

const Logs = () => {
    const { enqueueSnackbar } = useSnackbar();

    const handler = () => {
        enqueueSnackbar(`Successful.`, { variant: "success" });
    };

    return <span onClick={handler}>"Logs loading"</span>;
};

export default Logs;

是什么导致 notistack 出现此排队小吃店错误？

What is causing this enqueue snackbar error for notistack?

debugging

undefined

typeerror

reactjs

notistack