gpt4 book ai didi

reactjs - 是什么导致了 notistack 的这个排队 snackbar 错误?

转载 作者:行者123 更新时间:2023-12-03 16:01:39 26 4
gpt4 key购买 nike

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

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;

最佳答案

useSnackbar Hook 可从 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;

关于reactjs - 是什么导致了 notistack 的这个排队 snackbar 错误?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63752243/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com