react js 使用 useEffect 钩子

起因, 目的:

useEffect() , 已经遇见好几次了。 我的理解是,

  1. 页面加载完成之后,会执行这个函数。
  2. ???
写个例子, 请求 api
import React, { useState, useEffect } from "react";
import "./MyJoke.css";function MyJoke() {const [joke, setJoke] = useState(""); // 用来存储笑话内容// 定义一个异步函数来获取笑话const generateJoke = async () => {const config = {headers: {Accept: "application/json",},};const res = await fetch("https://icanhazdadjoke.com", config);const data = await res.json();setJoke(data.joke); // 将 API 获取的笑话内容设置为组件的状态};// 使用 useEffect 让组件首次加载时自动调用 generateJokeuseEffect(() => {generateJoke(); // 在组件加载时获取笑话}, []); // 空依赖数组,确保只在组件挂载时执行return (<div className="container"><h3>Hear me out!</h3><div id="joke" className="joke">{joke}</div><button id="jokeBtn" className="btn" onClick={generateJoke}>New Joke</button></div>);
}export default MyJoke;

在这里插入图片描述

结论 + todo

其实, 这部分,我还是不熟悉。 还需要再看看。

老哥,支持一下啊。

zfb

wx

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.xdnf.cn/news/140630.html

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

【C++】STL--string(上)

前言 C语言中&#xff0c;字符串是以\0结尾的一些字符的集合&#xff0c;为了操作方便&#xff0c;C标准库中提供了一些str系列的库函数&#xff0c;但是这些库函数与字符串是分离开的&#xff0c;不太符合OOP的思想&#xff0c;而且底层空间需要用户自己管理&#xff0c;稍不留…

numpy手写二分类交叉熵

下面是一个使用NumPy手写二分类交叉熵损失的代码&#xff0c;包括详细注释。我们将定义一个简单的函数来计算交叉熵损失&#xff0c;并使用main函数来演示如何使用它。 import numpy as npdef binary_cross_entropy(y_true, y_pred):"""计算二分类交叉熵损失参…

莎朗斯通的比基尼视频曝光了她的日常锻炼!自爆曾在重症监护室呆了9天

如果您错过了&#xff0c;莎朗斯通 (Sharon Stone) 的华丽比基尼视频向您展示了她的日常锻炼&#xff01; 9 月 12 日&#xff0c;斯通分享了一段她在泳池里锻炼的视频。她分享了这段视频&#xff0c;并配文&#xff1a;“我刚刚和教练 kristinemarie_18 完成了最后一次锻炼&a…

Python酷库之旅-第三方库Pandas(104)

目录 一、用法精讲 451、pandas.DataFrame.pow方法 451-1、语法 451-2、参数 451-3、功能 451-4、返回值 451-5、说明 451-6、用法 451-6-1、数据准备 451-6-2、代码示例 451-6-3、结果输出 452、pandas.DataFrame.dot方法 452-1、语法 452-2、参数 452-3、功能…

MyBatis中多对一关系的三种处理方法

目录 MyBatis中多对一关系的三种处理方法 1.通过级联属性赋值 1&#xff09;mapper 2&#xff09;mapper.xml 3&#xff09;测试代码 4&#xff09;测试结果 2.通过标签 1&#xff09;mapper 2&#xff09;mapper.xml 3&#xff09;测试代码 4&#xff09;测试结果 3.分步查询 …

Golang | Leetcode Golang题解之第405题数字转换为十六进制数

题目&#xff1a; 题解&#xff1a; func toHex(num int) string {if num 0 {return "0"}sb : &strings.Builder{}for i : 7; i > 0; i-- {val : num >> (4 * i) & 0xfif val > 0 || sb.Len() > 0 {var digit byteif val < 10 {digit 0…

kettle从入门到精通 第八十五课 ETL之kettle kettle中javascript步骤调用外部javascript/js文件

场景&#xff1a;交流学习群里面有小伙伴咨询kettle中的javascript代码步骤如何调用外部js文件中的函数&#xff0c;觉得有点意思的&#xff0c;于是就抽时间整理了一下。 1、外部js文件为test.js&#xff0c;代码如下&#xff1a; function test(param){return "接收到了…

估值1500亿美元!OpenAI据称正洽谈新一轮融资 | LeetTalk Daily

“LeetTalk Daily”&#xff0c;每日科技前沿&#xff0c;由LeetTools AI精心筛选&#xff0c;为您带来最新鲜、最具洞察力的科技新闻。 OpenAI作为全球领先的人工智能研究机构之一&#xff0c;近期宣布计划以1500亿美元的投前估值融资65亿美元&#xff0c;这一消息引发了广泛的…

【Git】常见命令(仅笔记)

文章目录 创建/初始化本地仓库添加本地仓库配置项提交文件查看仓库状态回退仓库查看日志分支删除文件暂存工作区代码远程仓库使用 .gitigore 文件让 git 不追踪一些文件标签 创建/初始化本地仓库 git init添加本地仓库配置项 git config -l #以列表形式显示配置项git config …

电脑连手机热点,上不了网

打开适配器设置 双击打开

【若依RuoYi-Vue | 项目实战】帝可得后台管理系统(一)

文章目录 一、项目背景介绍1、什么是帝可得&#xff1f;2、物联网3、售货机术语4、角色与功能5、业务流程&#xff08;1&#xff09;平台管理员&#xff08;2&#xff09;运维人员&#xff08;3&#xff09;运营人员&#xff08;4&#xff09;消费者 6、产品原型7、库表设计 二…

【笔记】CCF直播:《如何在国际会议上有效交流》(2024-9-15)

目录 一、提问的勇气二、提问什么三、其他主题的报告为什么听四、会议前怎么读大量论文&#xff1f;五、workshop为什么参加&#xff1f;Poster环节&#xff1f;六、提问环节七、其他 今天听了《如何在国际会议上有效交流》的直播讲座&#xff0c;记录一些笔记。 一、提问的勇…

SQL进阶技巧:火车票相邻座位预定一起可能情况查询算法 ?

目录 0 场景描述 1 数据准备 2 问题分析 2.1 分析函数法 2.2 自关联求解 3 小结 如果觉得本文对你有帮助&#xff0c;那么不妨也可以选择去看看我的数字化建设通关指南博客专栏 &#xff0c;或许对你更有用。专栏原价99&#xff0c;现在活动价29.9&#xff0c;按照阶梯…

COSMOSPANDA星际熊猫助阵长江商学院高尔夫周年庆典

在金秋送爽的美好时节&#xff0c;星际漫游&#xff08;广州&#xff09;品牌管理有限公司旗下备受欢迎的潮玩IP“COSMOSPANDA星际熊猫”与长江商学院深圳校友会强强联手&#xff0c;于9月10日在风景如画的中山雅居乐长江高尔夫球会成功举办了“长江商学院深圳校友会高尔夫球队…

论文速递!Knowledge-driven+Informer! 联合知识和数据驱动的混合模型,用于NOx排放浓度预测

论文标题&#xff1a;Prediction of NOx emission concentration from coal-fired power plant based on joint knowledge and data driven 期刊信息&#xff1a;Energy (中科院1区, JCR Q1 TOP, IF9) 引用&#xff1a;Wu Z, Zhang Y, Dong Z. Prediction of NOx emission co…

【Android Studio】API 29(即Android 10)或更高版本,在程序启动时检查相机权限,并在未获取该权限时请求它

文章目录 1. 在AndroidManifest.xml文件中&#xff0c;声明相机权限&#xff1a;2. 在你的Activity中&#xff08;例如MainActivity&#xff09;测试 1. 在AndroidManifest.xml文件中&#xff0c;声明相机权限&#xff1a; <uses-feature android:name"android.hardwar…

win11下面graphviz的用法

安装 安装graphviz 2.38版本 控制面板在变量path中增加E:\software\Graphviz\bin example.dot代码 digraph SignalPathway {node [fontname"SimHei"];edge [fontname"SimHei"];// 定义节点形状node [shapecircle];// 定义节点CellA [label"细胞 A&…

【Elasticsearch系列五】Java API

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

Autosar E2E通信保护简介

文章目录 前言一、E2E基本概念二、为什么要做E2E?三、E2E保护的三种不同实现方式E2E TransformerE2E Protection Wrapper(E2EPW)COM E2E Callout四、E2E ProfileE2E Profile 01 机制E2E Profile 02 机制E2E Profile 04 机制E2E Profile 05 机制E2E Profile 06 机制E2E Profi…

《微信小程序实战(1)· 开篇示例 》

&#x1f4e2; 大家好&#xff0c;我是 【战神刘玉栋】&#xff0c;有10多年的研发经验&#xff0c;致力于前后端技术栈的知识沉淀和传播。 &#x1f497; &#x1f33b; CSDN入驻不久&#xff0c;希望大家多多支持&#xff0c;后续会继续提升文章质量&#xff0c;绝不滥竽充数…