React hook 之 useState
在组件的顶部定义状态变量,并传入初始值,确保当这些状态变量的值发生变化时,页面会重新渲染。
const [something,setSomething] = useState(initialState);
useState 返回一个由两个值组成的数组:1、当前的 state,在首次渲染时,它将与你传递的 initialState 相匹配。2、set 函数,它可以让你将 state 更新为不同的值并触发重新渲染。
something是定义的状态变量,initialState是初始值,setSomething函数允许你将 state 更新为不同的值并触发重新渲染。
1、定义一个字符串变量
import { useState } from 'react';
// 定义一个字符串变量,初始值为null;
const [name, setName] = useState(null);
// 需要改变时,直接调用setName赋值
setName('hello world');
console.log(name); // 打印结果为: hello world
2、定义一个对象变量
import { useState } from 'react';
const [serverObj, setServerObj] = useState({ip:'',port:''});// 输入框变化时const inputChange = (val) => {// 调用setServerObj赋值setServerObj({ ...serverObj, ip: val });};// 输入框组件
<Input placeholder='IP' value={serverObj.ip} onChange={val=>{inputChange(val)}}/>
注意:useState 是一个 Hook,因此你只能在组件的顶层调用它。
相关文章:
![](https://www.ngui.cc/images/no-images.jpg)
React hook 之 useState
在组件的顶部定义状态变量,并传入初始值,确保当这些状态变量的值发生变化时,页面会重新渲染。 const [something,setSomething] useState(initialState); useState 返回一个由两个值组成的数组:1、当前的 state,在首次…...
![](https://i-blog.csdnimg.cn/direct/d76619dd2edc4076b7b4aa2c73050cf4.png)
jenkins中shell脚本中使用构建参数化Groovy变量的四种方式
jenkins中shell脚本中使用构建参数化Groovy变量的四种方式: 以字符变量为例: 流水线代码: pipeline {agent {//label "${server}"label "${28}"}stages {stage(Hello) {steps {echo Hello Worldecho "${28}"echo "…...
![](https://i-blog.csdnimg.cn/direct/319900975815427ca390362ae8cde57f.png)
Robot Operating System——ParameterEventHandler监控Parameters的增删改行为
大纲 创建订阅"/parameter_events"的Node监控自身Node内部Parameter监控自身Node外部Parameter监听所有Node的所有Parameter的变动执行效果总结 在《Robot Operating System——AsyncParametersClient监控Parameters的增删改行为》一文中,我们通过AsyncPa…...
![](https://img-blog.csdnimg.cn/direct/0811b19b09514cd49747e576bc343d2f.png)
计算机网络(Wrong Question)
一、计算机网络体系结构 1.1 计算机网络概述 D 注:计算机的三大主要功能是数据通信、资源共享、分布式处理。(负载均衡、提高可靠性) 注:几段链路就是几段流水。 C 注:记住一个基本计算公式:若n个分组&a…...
![](https://i-blog.csdnimg.cn/direct/d58cbb5ce8ff483bafa55d932d032190.png)
Docker+consul容器服务的更新与发现
1、Consul概述 (1)什么是服务注册与发现 服务注册与发现是微服务架构中不可或缺的重要组件。起初服务都是单节点的,不保障高可用性,也不考虑服务的压力承载,服务之间调用单纯的通过接口访问。直到后来出现了多个节点…...
![](https://i-blog.csdnimg.cn/direct/609bc2799cbf4ede8fc9c20805034c7c.png)
全网最详细!! Linux 安装、配置教程
一、下载安装包 首先去官网下载VMware最新版本,以及发行版CentOS -7,懒得下载的可以私信我,我给你发包 其中,CentOS(Community Enterprise Operating System)是一个基于Linux的开源操作系统,它是…...
![](https://i-blog.csdnimg.cn/direct/814826e3064e4c4a8556dac1934d2e55.png)
cocos creator 3学习记录01——如何替换图片
一、动态加载本地图片 1、通过将图片关联到CCClass属性上来进行代码切换。 1、这种方法,需要提前在脚本文件中声明好代表图片的CCClass属性。 2、然后拖动图片资源,到脚本内声明好的属性上以进行关联。 3、然后通过程序,来进行切换展示。…...
![](https://i-blog.csdnimg.cn/direct/5c2a58b23a85492c8a3bf58adac5c018.png)
【Android Compose】ListView效果
【Android Compose】ListView效果 1、Column、Row 和 Box2、LazyColumn和LazyRow3、Compose 中的状态4、ListView效果5、android-compose-codelabs Jetpack Compose 使用入门 Jetpack Compose 教程 Jetpack Compose 1、Column、Row 和 Box Compose 中的三个基本标准布局元素是 …...
![](https://www.ngui.cc/images/no-images.jpg)
【Pytorch实战教程】Pytorch中.detach()的详细介绍
detach() 是 PyTorch 中用于分离张量的计算图的一个方法。它在处理计算图时非常有用,尤其是在需要停止梯度传播的情况下。以下是 detach() 方法的详细介绍: 方法概述 detach() 方法返回一个新的张量,从当前计算图中分离出来,即返回的张量不会参与梯度计算。这在某些情况下…...
![](https://i-blog.csdnimg.cn/direct/ae009c7070e44df6a74026c662a4ddce.png)
AR 眼镜之-充电动画定制-实现方案
目录 📂 前言 AR 眼镜系统版本 充电动画 1. 🔱 技术方案 1.1 方案介绍 1.2 实现方案 关机充电动画 亮屏/锁屏充电动画 2. 💠 关机充电动画 2.1 关机充电动画核心处理类与路径 2.2 实现细节 步骤一:1)定制 …...
![](https://i-blog.csdnimg.cn/blog_migrate/81c1a3044639c2d46f459eae5a28edef.jpeg)
AJAX-XMLHttpRequest 详解
(创作不易,感谢有你,你的支持,就是我前行的最大动力,如果看完对你有帮助,请留下您的足迹) 目录 前言 XMLHttpRequest 概述 主要用途 工作流程 示例代码 GET 请求示例 POST 请求示例 注意事项 工作…...
![](https://www.ngui.cc/images/no-images.jpg)
内容管理系统 Contentful 与 Baklib
对于希望管理其产品和服务的在线文档或知识库以支持其客户和员工的组织来说,市场上有太多的平台和工具。 遵循的做法之一是使用无头内容管理系统 (CMS)。 如果您是这样的组织之一,正在考虑使用无头 CMS - Contentful 之一来管理您的在线知识库࿰…...
![](https://www.ngui.cc/images/no-images.jpg)
[Mysql-视图和存储过程]
视图 视图是从一个或者几个基本表(或视图)导出的表。它与基 本表不同,是一个虚表。 创建使用视图 # 视图 -- 视图只能用来查询,不能做增删改 -- 创建视图 -- create view 视图名【view_xxx / v_xxx】 -- as 查询语句 create view…...
![](https://i-blog.csdnimg.cn/direct/791728d7577440baad7b2e8d69b5dac7.png)
Linux下C++静态链接库的生成以及使用
目录 一.前言二.生成静态链接库三.使用静态链接库 一.前言 这篇文章简单讨论一下Linux下如何使用gcc/g生成和使用C静态链接库(.a文件)。 二.生成静态链接库 先看下目录结构 然后看下代码 //demo.h#ifndef DEMO_H #define DEMO_H#include<string&g…...
![](https://i-blog.csdnimg.cn/direct/ebe446dfa63344da9d6640762daf6a85.png)
【8月EI会议推荐】第四届区块链技术与信息安全国际会议
一、会议信息 大会官网:http://www.bctis.nhttp://www.icbdsme.org/ 官方邮箱:icbctis126.com 组委会联系人:杨老师 19911536763 支持单位:中原工学院、西安工程大学、齐鲁工业大学(山东省科学院)、澳门…...
![](https://i-blog.csdnimg.cn/direct/9f740f7567814d719ac3e956ef375c88.png)
2024年【甘肃省安全员B证】考试资料及甘肃省安全员B证模拟试题
题库来源:安全生产模拟考试一点通公众号小程序 2024年甘肃省安全员B证考试资料为正在备考甘肃省安全员B证操作证的学员准备的理论考试专题,每个月更新的甘肃省安全员B证模拟试题祝您顺利通过甘肃省安全员B证考试。 1、【多选题】5kW以上电动机开关箱中电…...
![](https://i-blog.csdnimg.cn/direct/88bc92b1da2d49b797f0c56392b64663.png)
结合el-upload上传组件,验证文件格式及大小
结合el-upload上传组件,验证文件格式及大小 效果如下: 代码如下: upgradeFirmwareInfo.vue页面 <template><div><el-dialog title"新增固件升级包" :visible.sync"dialogFormVisible"top"7vh&qu…...
![](https://www.ngui.cc/images/no-images.jpg)
配置php-fpm服务
nginx(unix domain socket方式) server {listen 80;#root /test/php/publiclocation / {#URL重写 例如隐藏index.phpif (!-f $request_filename) {rewrite ^(.*)$ /index.php?s/$1 last;break;}}location ~ [^/]\.php(/|$) {#try_files $uri 404;fastcgi_index index.php;…...
![](https://www.ngui.cc/images/no-images.jpg)
科普文:Linux系统安全加固指南
本指南仅关注安全性和隐私性,而不关注性能,可用性或其他内容。 列出的所有命令都将需要root特权。以“$”符号开头的单词表示一个变量,不同终端之间可能会有所不同。 选择正确的Linux发行版 选择一个好的Linux发行版有很多因素。 避免分发…...
![](https://i-blog.csdnimg.cn/direct/90811c9fb47c4421a76519b37a98cdfe.png)
MFC开发,自定义消息
在MFC开发中,主要核心机制就是消息机制。QT与之类似的机制就是信号与槽。QT中的信号与槽是非常容易自定义的,MFC也是如此,自定义也是比较方便,况且自定义消息或者控件在整个GUI图形化界面开发中也是非常重要的部分,上篇…...
![](https://img-blog.csdnimg.cn/img_convert/4b220e9919bf4c8d4bdec827e26796ab.jpeg)
如何在 SpringBoot 中优雅的做参数校验?
一、故事背景 关于参数合法性验证的重要性就不多说了,即使前端对参数做了基本验证,后端依然也需要进行验证,以防不合规的数据直接进入服务器,如果不对其进行拦截,严重的甚至会造成系统直接崩溃! 本文结合…...
![](https://i-blog.csdnimg.cn/direct/92b0764131d24a4bbeecbfd5890993e7.png)
Godot入门 03世界构建1.0版
在game场景,删除StaticBody2D节点,添加TileMap节点 添加TileSet图块集 添加TileSet源 拖动图片到图块,自动创建图块 使用橡皮擦擦除。取消橡皮擦后按住Shift创建大型图块。 进入选择模式,TileMap选择绘制,选中图块后在…...
![](https://www.ngui.cc/images/no-images.jpg)
GitHub每日最火火火项目(7.26)
1. 项目名称:meta - llama / llama3 项目介绍:这是 Meta Llama 3 的官方 GitHub 站点。目前尚不清楚该项目的具体功能和特点,但从名称推测,它可能与 Llama 3 模型相关,或许涉及到该模型的开发、训练或应用等方面。 项…...
![](https://i-blog.csdnimg.cn/direct/66229bb37b4d4924aff0273700bdc816.png)
微服务实践和总结
H5原生组件web Component Web Component 是一种用于构建可复用用户界面组件的技术,开发者可以创建自定义的 HTML 标签,并将其封装为包含逻辑和样式的独立组件,从而在任何 Web 应用中重复使用。 <!DOCTYPE html> <html><head…...
![](https://www.ngui.cc/images/no-images.jpg)
Spring Boot中的策略模式:优雅地处理不同商品类型的订单
引言 在开发复杂的业务系统时,我们经常会遇到需要根据不同条件执行不同逻辑的情况。例如,在电商平台中,可能需要根据商品的不同类型(如电子产品、服装、食品等)来执行不同的业务逻辑,比如不同的库存管理、…...
![](https://i-blog.csdnimg.cn/direct/a39d096e16944ed7a878af6befbe13d9.png)
django_创建菜单(实现整个项目的框架,调包)
文章目录 前言代码仓库地址在线演示网址启动网站的时候出现错误渲染路径的一些说明文件结构网页显示一条错误路由顺序js打包出现问题的代码函数没有起作用关于进度开发细节显示不了图片梳理一下函数调用的流程修改一些宽度参数classjs 里面的一些细节让三个按钮可以点击设置按钮…...
![](https://img-blog.csdnimg.cn/img_convert/c93bfd8cad3f020c711d18ee7af22567.png)
最新全新UI异次元荔枝V4.4自动发卡系统源码
简介: 最新全新UI异次元荔枝V4.4自动发卡系统源码 更新日志: 1增加主站货源系统 2支持分站自定义支付接口 3目前插件大部分免费 4UI页面全面更新 5分站可支持对接其他分站产品 6分站客服可自定义 7支持限定优惠 图片: 会员中心截图&…...
![](https://i-blog.csdnimg.cn/direct/ce6cda5ff52b42d19aac1531a3859bcc.png)
PyTorch安装CUDA标准流程(可解决大部分GPU无法使用问题)
最近一段时间在研究PyTorch中的GPU的使用方法,之前曾经安装过CUDA,不过在PyTorch中调用CUDA时无法使用。考虑到是版本不兼容问题,卸载后尝试了其他的版本,依旧没有能解决问题,指导查阅了很多资料后才找到了解决方案。 …...
![](https://img-blog.csdnimg.cn/direct/c03fe913f2ca431c882b12f15f0c32a1.gif)
C++从入门到起飞之——初始化列表类型转换static成员 全方位剖析!
🌈个人主页:秋风起,再归来~🔥系列专栏:C从入门到起飞 🔖克心守己,律己则安 目录 1、初始化列表 2、 类型转换 3. static成员 4、完结散花 1、初始化列表 • 之前我们实现构造函数…...
![](https://www.ngui.cc/images/no-images.jpg)
PHP框架简介
PHP是一种广泛使用的开源脚本语言,主要用于Web开发,它可以创建动态交互式Web页面。而PHP框架则是一套用于开发Web应用程序的工具和库的集合,它可以帮助开发者更高效地编写PHP代码,提高开发速度和代码的可维护性。 理解PHP框架&am…...
![](https://www.ngui.cc/images/no-images.jpg)
微信小程序-粘性组件
再次完善:将区域设置为粘性时,会脱离原有文档,使得出现下方页面突然遮盖一部分,不平滑 解决:给出一个新的空白区域,宽高与粘性区域一致,wx:if 控制其显示 /****************/ 后续补充&#…...
![](https://i-blog.csdnimg.cn/direct/56d2dc72de47499bb1279a8bf22ddaa0.png)
微服务注册中心
目录 1.微服务的注册中心 1.1 注册中⼼的主要作⽤ 1.2 常⻅的注册中⼼ 2.nacos简介 2.1 nacos实战⼊⻔ 2.2.1 搭建nacos环境 2.2.2 将商品微服务注册到nacos 3.服务调⽤Ribbon⼊⻔ 3.1 Ribbon概述 3.1.1 什么是Ribbon 3.1.2 Ribbon的主要作⽤ 3.2.2 ⼯程改造 4.服务…...
![](https://i-blog.csdnimg.cn/direct/4c5da8b5db854f03bfc7c65cec33c9f8.png)
HDU1032——The 3n + 1 problem,HDU1033——Edge,HDU1034——Candy Sharing Game
目录 HDU1032——The 3n 1 problem 题目描述 运行代码 代码思路 HDU1033——Edge 题目描述 运行代码 代码思路 HDU1034——Candy Sharing Game 题目描述 运行代码 代码思路 HDU1032——The 3n 1 problem 题目描述 Problem - 1032 运行代码 #include <iostr…...
![](https://i-blog.csdnimg.cn/direct/5e5dda4495324f18a1d246c6f1f9faf3.png)
内网对抗-隧道技术篇防火墙组策略HTTP反向SSH转发出网穿透CrossC2解决方案
知识点: 1、C2/C2上线-CrossC2插件-多系统平台支持 2、隧道技术篇-应用层-SSH协议-判断&封装&建立&穿透 3、隧道技术篇-应用层-HTTP协议-判断&封装&建立&穿透隧道技术主要解决网络通讯问题:遇到防火墙就用隧道技术,…...
![](https://i-blog.csdnimg.cn/direct/4135b4f948de470c9083f0a8f9b88588.png)
实战案例:如何用ChatGPT生成适合不同领域的高质量文章
随着人工智能技术的快速进展,制作高质量文章已变得轻而易举。尤其是OpenAI推出的ChatGPT,极大地简化了写作任务。接下来,本文将通过具体案例,详解如何利用ChatGPT撰写不同领域的高品质文章。 背景:光辉AI交流-免费问答…...
![](https://www.ngui.cc/images/no-images.jpg)
多线程案例-单例模式
单例模式是设计模式之一,能保证某个类在程序中只存在唯一一份实例,而不会创建出多个实例 单例模式的具体实现方法有很多,最常见的是 “饿汉” 和 “懒汉” 两种。 饿汉模式 class Singlenton{private static Singlenton instance new Sin…...
![](https://img-blog.csdnimg.cn/img_convert/f05ffb5140f09bf838b5788af8f2dab4.png)
P6 优化篇 - 数据折线图可视化步骤
增加新页面, 则需要在 page.json里面增加页面信息 2.添加目录, 和路径 同时也要添加目录了 , 新建目录LineChart , 添加文件LineChart.vue 4.LineChart.vue 直接复制黏贴 <template><view class"container"><!-- 图表显示区域 --><view cla…...
![](https://i-blog.csdnimg.cn/direct/825da01f437349d084bae3774a5d3d2e.png)
优选算法之二分查找(上)
目录 一、二分查找 1.题目链接:704. 二分查找 2.题目描述: 3.算法流程: 4.算法代码: 二、在排序数组中查找元素的第一个和最后一个位置 1.题目链接:34. 在排序数组中查找元素的第一个和最后一个位置 2.题目描述…...
![](https://i-blog.csdnimg.cn/direct/aae42beb59e3492dbbbd51cb4fb2e7af.png)
JavaScript(16)——定时器-间歇函数
开启定时器 setInterval(函数,间隔时间) 作用:每隔一段时间调用这个函数,时间单位是毫秒 例如:每一秒打印一个hello setInterval(function () { document.write(hello ) }, 1000) 注:如果是具名函数的话不能加小括号…...
![](https://www.ngui.cc/images/no-images.jpg)
VUE中的重点*
1.MVC 和 MVVM的区别? MVC:M(model数据)、V(view视图),C(controlle控制器) 缺点是前后端无法独立开发,必须等后端接口做好了才可以往下走; 前端没…...
![](https://i-blog.csdnimg.cn/direct/37f046ab370b44a09046cdb081db235a.png)
rabbitmq生产与消费
一、rabbitmq发送消息 一、简单模式 概述 一个生产者一个消费者模型 代码 //没有交换机,两个参数为routingKey和消息内容 rabbitTemplate.convertAndSend("test1_Queue","haha");二、工作队列模式 概述 一个生产者,多个消费者&a…...
![](https://i-blog.csdnimg.cn/direct/f3a088b084fb45c6a5cfbb88c93d5620.png)
spring-boot3.x整合Swagger 3 (OpenAPI 3) +knife4j
1.简介 OpenAPI阶段的Swagger也被称为Swagger 3.0。在Swagger 2.0后,Swagger规范正式更名为OpenAPI规范,并且根据OpenAPI规范的版本号进行了更新。因此,Swagger 3.0对应的就是OpenAPI 3.0版本,它是Swagger在OpenAPI阶段推出的一个…...
![](https://i-blog.csdnimg.cn/direct/285f4cd41e914ee480d7685ada2fb666.png)
SM2隐式证书用户公私钥生成python代码实现
GMT0130-2023具体描述基于SM2算法的隐式证书公钥机制,这里尝试Python代码实现密钥生成部分功能,具体如下,椭圆曲线计算实现使用python第三方包gmssl。 #生成用户私钥Da和公钥Pa,其中Da(tAdA)mod N,Pa可以直…...
![](https://img-blog.csdnimg.cn/img_convert/44129dc5c54fe90f645d6356ff46791c.png)
IEC104转MQTT网关快速实现了IEC104到MQTT的转换和数据交互
随着智能电网技术的不断进步,IEC 104(IEC 60870-5-104)协议作为电力系统中重要的远动通信标准,正逐步融入更广泛的物联网生态系统中。亚马逊AWS(Amazon Web Services),作为全球领先的云计算服务…...
![](https://i-blog.csdnimg.cn/direct/f6d5ec361ca34437bafc5e3659631b81.png#pic_center)
【OpenCV C++20 学习笔记】调节图片对比度和亮度(像素变换)
调节图片对比度和亮度(像素变换) 原理像素变换亮度和对比度调整 代码实现更简便的方法结果展示 γ \gamma γ校正及其实操案例线性变换的缺点 γ \gamma γ校正低曝光图片矫正案例代码实现 原理 关于OpenCV的配置和基础用法,请参阅本专栏的其…...
![](https://www.ngui.cc/images/no-images.jpg)
web UI自动化测试 浏览器模式设置
自动化之浏览器模式设置 做selenium UI自动化测试时,每次都需要启动浏览器、用例运行结束后再关闭浏览器,浏览器启动相当地耗费时间,在本机运行用例的话还得放开双手,可以使用chrome的headless模式,让浏览器在后台运行…...
![](https://i-blog.csdnimg.cn/direct/d8b70d7f4b714d01a75eb0b2e240381f.png)
OpenCV图像滤波(1)双边滤波函数bilateralFilter的使用
操作系统:ubuntu22.04 OpenCV版本:OpenCV4.9 IDE:Visual Studio Code 编程语言:C11 功能描述 bilateralFilter是图像处理和计算机视觉领域中的一种高级图像滤波技术,特别设计用于在去除噪声的同时保留图像的边缘和细节。相比于传…...
![](https://www.ngui.cc/images/no-images.jpg)
前端开发使用Big.js精算避免误差
1、下载 npm install big.js 全局引入还是局部引入可根据项目框架及个人需求 2、静态引入 < script src https://unpkg.com/big.js6.0.0/big.mjs > </ script > 或者 import Big from https://raw.githubusercontent.com/mikemcl/big.js/v6.0.0/big.mjs; i…...
![](https://www.ngui.cc/images/no-images.jpg)
在 Ubuntu 22.04/20.04 安装 CVAT 和 SAM 指南
1. 安装 Docker 和 Docker Compose sudo apt-get update sudo apt-get --no-install-recommends install -y \apt-transport-https \ca-certificates \curl \gnupg-agent \software-properties-common curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-ke…...
![](https://i-blog.csdnimg.cn/direct/9d02b65cf8724c338fd03927c9af9005.png)
【SpringCloud】 微服务分布式环境下的事务问题,seata大合集
目录 微服务分布式环境下的事务问题 分布式事务 本地事务 BASE理论与强弱一致性 BASE理论 强弱一致性 常见分布式事务解决方案 - 2PC 常见分布式事务解决方案 - TCC 常见分布式事务解决方案 - 最大努力通知 常见分布式事务解决方案 - 最终一致性 Seata介绍与术语 Seata…...