社区首页 >问答首页 >如何在react中使用效果钩子?

如何在react中使用效果钩子?
EN

Stack Overflow用户
提问于 2020-07-22 12:03:30
回答 1查看 69关注 0票数 1

我想从使用钩子中返回一个使用useEffect的函数,但我收到错误消息“在既不是react函数组件也不是自定义钩子的函数中调用了useeffect。

我要做的是什么?

我有addbutton组件,当用户单击add按钮时,我想调用函数requestDialog。

下面是我在addbutton文件中的代码

代码语言:javascript
代码运行次数:0
复制
    function AddButton () {
        const count = useGetCount();
        const requestDialog = useRequestDialog(); //using usehook here
        const on_add_click = ()  => {
            requestDialog(count); //calling requestDialog here
        }

        return (
            <button onClick={on_add_click}>add</button>
        );  
    }

 
    interface ContextProps {
        trigger: (count: number) => void;
    }

    const popupContext = React.createContext<ContextProps>({
        trigger: (availableSiteShares: number) => {},
    });

    const usePopupContext = () => React.useContext(popupContext);

    export const popupContextProvider = ({ children }: any) => {
        const [show, setShow] = React.useState(false);
        const limit = 0;

        const dismiss = () => {
            if (show) {
                sessionStorage.setItem(somePopupId, 'dismissed');
                setShow(false);
            }

        };

        const isDismissed = (dialogId: string) =>
            sessionStorage.getItem(dialogId) === 'dismissed';

            const context = {
                trigger: (count: number) => {
                if (!isDismissed(somePopupId) && count <= limit) {
                    setShow(true);
                } else if (count > limit) {
                    setShow(false);
                }
            },
        };

        return (
            <popupContext.Provider value={context}>
                {children}
                {show && (
                    <Popup onHide={dismiss} />
                )}
            </popupContext.Provider>
        );
    };


    export function useRequestDialog(enabled: boolean,count: number) {
        return function requestDialog() { //here is the error
            const { trigger } = usePopupContext();
            React.useEffect(() => {
                trigger(count);
            }
        }, [count, trigger]);
     }

如何解决错误“”在既不是react函数组件也不是自定义钩子的函数中调用useEffect。“

我不知道如何使用useeffect,同时在addbutton组件中使用它。

有人能帮我一下吗。谢谢

EN

回答 1

Stack Overflow用户

发布于 2020-07-22 12:09:09

useEffect方法类似于useEffect(() => {}, []),但您在requestDialog中的用法是错误的。尝试使用以下命令进行更改。

代码语言:javascript
代码运行次数:0
复制
function requestDialog() {
  const { trigger } = usePopupContext();
  React.useEffect(() => {
    trigger(count);
  }, [count, trigger]);
}
票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/63033768

复制
相关文章
paste和paste0的区别
--- title: "paste和paste0的区别" output: html_document date: "2023-03-08" --- 首先查看paste()或paste0()函数的帮助文
小叮当aka
2023/03/17
9070
paste和paste0的区别
从帮助文档看,paste和paste0只有< sep = " " >这一个参数有区别
用户10331357
2023/02/07
7720
FatFs检测并建立多层目录并更改文件名
FatFs检测文件路径是否存在,不存在就建立多层目录,最后更改文件名 if(W_Dresult==FR_OK) { wifi_dp_wav_file_status=0; start_downloading=0; /*************************************遍历创建文件夹*************************************************************/ u8 opendir_err = 0; /
小锋学长生活大爆炸
2020/08/13
1.8K0
paste命令
按列合并/tmp/file1.txt与/tmp/file2.txt文件,并追加到/tmp/file3.txt。
WindRunnerMax
2020/08/27
7760
如何使用PasteMonitor自动收集每天的Paste
PasteMonitor是一款针对Pastebin的数据爬取工具,该工具可以通过爬取Pastebin API来收集站点上用户每天发布的Paste。除此之外,广大研究人员还可以通过设置字典来爬取与关键词匹配的Paste内容。
FB客服
2022/06/08
6990
如何使用PasteMonitor自动收集每天的Paste
Flash: Event.PASTE Flash获取剪贴板内容 触发paste事件 how to get paste event
actionscript把文字存放到剪贴板这个就非常简单了,一般网站做点击复制基本都是这么做的。 但是,基本没有人做flash粘贴内容。今天本来想尝试一下,通过flash实现网页编辑器粘贴图片,但貌似行不通。。。 当运行Clipboard.generalClipboard.getData的时候,肯定会碰到报错,说只能在PASTE事件中调用。那么,paste事件到底在哪里?一般TextField不会触发,有人说TLFTextField可以触发,另外,以下的方式更直接一些。 但是,无论如何,swf还是无法获取到
用户1258909
2018/07/05
1K0
Python Paste 学习笔记
这篇文章主要介绍了Python的Paste库的使用,学习过程中主要参考官网文档以及自己的理解,整理成笔记以便后续自己查阅。 如果转载,请保留作者信息。 邮箱地址:jpzhang.ht@gmail.com Python Paste:http://pythonpaste.org/
py3study
2020/01/06
2.4K0
前端下载文件并设置文件名字
data 是接口地址 if (!data) { return; } let blob = new Blob([data], { type: "application/vnd.openxmlformats-officedocument.wordprocessingml.document;charset=utf-8" }); let url = window.URL.createObjectURL(blob
用户4344670
2020/05/26
2.9K0
JS获取图片URL并截取文件名和后缀
最近在改一个之前别人对接项目,遇到一个问题。现在要解决问题,需要获取图片的链接,并把链接中的(图片)文件名提取出来。下面开始:
德顺
2023/08/25
7070
JS获取图片URL并截取文件名和后缀
最近在改一个之前别人对接项目,遇到一个问题。现在要解决问题,需要获取图片的链接,并把链接中的(图片)文件名提取出来。下面开始:
德顺
2020/08/11
11.4K0
小程序文件下载并保存文件名打开
盼星星,盼月亮,终于盼来了微信小程序SaveFile接口的调整,以前10M限制的时代一去不复返了。
Kindear
2020/10/19
5K1
论怎么黏在一起-R(paste|paste0)|Excel(concatenate)
Excel里的一系列已经写好的函数,用起来之后,会不禁感叹,那么长一段时间,我们真的是暴殄天物了!!!
生信技能树
2019/05/24
8120
【随笔】关于算法竞赛中使用文件输入输出和文件名的规定等问题
算法竞赛对文件名有着严格的规定,包括程序名和输入输出文件名,不要使用绝对路径或者相对路径。
马三小伙儿
2018/09/12
8730
Linux命令(43)——paste命令
paste命令将多个文件的相应行默认以Tab分隔符横向连接起来,输出到标准输出。paste后可接多个文件,不限于2个文件。如果文件写成“-”,表示内容来自标准输入。paste相对于join来说,简单许多,不需要有相同的字段才能按行连接。
恋喵大鲤鱼
2018/08/03
1.3K0
JavaScript 下载文件并保持原文件名称
注:此代码只是个人根据当时的环境满足了当时的需求,记录下来用做后续参考!如有问题,请检查软硬件环境是否一致,由于时间精力有限,大部分未做详细环境描述。
全栈程序员站长
2022/09/06
7620
Python:监控键盘输入、鼠标操作,并
  使用pyhook模块可以很快地完成键盘及鼠标事件捕获,本来想使用python的logging模块,但测试时发现,因为鼠标事件频率太高,导致写时报I/O错误的异常,所以使用了自己写文件记录日志的方式。
py3study
2020/01/06
2K0
grep、awk、paste命令应用 原
注: 在awk中使用脱义字符‘\’是起不到作用的,如果想打印特殊字符,只能使用 '""' 这样的组合才可以。 这里自左至右为单引号、双引号、双引号、单引号其中两个单引号为一对,两个双引号为一对。想脱义$那就是'"$"'。
阿dai学长
2019/04/03
7850
点击加载更多

相似问题

SQL查询以获取最新价格

1011

根据日期获取最新价格的SQL查询

21

如何在sql查询中获取最新价格

20

SQL查询仅获取父目录

369

SQL查询价格检索

13
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档