当前位置：首页 > news >正文

千峰React:案例二

news 来源：原创 2025/9/11 15:32:52

完成对html文档还有css的引入，引入一下数据：

import { func } from 'prop-types'
import './购物车样式.css'
import axios from 'axios'
import { useImmer } from 'use-immer'
import { useEffect } from 'react'function Item() {return (<li className='active'><h3>香蕉</h3><p>单价：5</p><p>数量：<span className='remove'>-</span><span>1</span><span className='add'>+</span></p><div className='cartbtn'>取消购买</div></li>)
}function Cart() {const [list, setList] = useImmer([])useEffect(() => {axios.get('../public/cartData.json').then((res) => {console.log(res)})})return (<div className='cart'><ul><Item /></ul><div className='all'>总金额：<span>5</span>元</div></div>)
}
export default Cart

然后判断数据是否存在：

刚刚数字一直在疯涨，导致他疯涨的原因是我的useEffect没加依赖数组，还有axios的url，如果我的数据文件在public里，可以直接从根目录访问（好像学过），要写成这样👇

useEffect(() => {axios.get('/cartData.json').then((res) => {if (res.data.errcode === 0) {//map来给购物车添加setList(res.data.list.map((item) => ({...item,active:false})))}})},[])

还有一个无语的bug是箭头函数的return每次都会加大括号忘记加retuen，不加return又会格式化到下一行

对每个按钮绑上onClick事件，再给每个按钮绑上id：

import { func } from 'prop-types'
import './购物车样式.css'
import axios from 'axios'
import { useImmer } from 'use-immer'
import { useEffect } from 'react'function Item({id,name,price,number,active,handleAdd}) {return (//active初始根据active的值判定<li className={ active?'active':''}><h3>{ name}</h3><p>单价：{ price}</p><p>数量：<span className='remove'>-</span><span>{ number}</span><span className='add'>+</span></p><div className='cartbtn' onClick={()=>handleAdd(id)}>{ active?'取消购买':'添加购物车'}</div></li>)
}function Cart() {const [list, setList] = useImmer([])useEffect(() => {axios.get('/cartData.json').then((res) => {if (res.data.errcode === 0) {//map来给购物车添加setList(res.data.list.map((item) => ({ ...item, active: false })))}})}, [])const handleAdd=(id) => {setList((draft) => {const value = draft.find((item) => item.id === id)value.active=!value.active})}return (<div className='cart'><ul>{list.map((item) => <Item key={item.id} {...item} handleAdd={handleAdd} />)}</ul><div className='all'>总金额：<span>5</span>元</div></div>)
}
export default Cart

增加修改数量的功能

import { func } from 'prop-types'
import './购物车样式.css'
import axios from 'axios'
import { useImmer } from 'use-immer'
import { useEffect } from 'react'function Item({id,name,price,number,active,handleAdd,handleNumberChange,
}) {return (//active初始根据active的值判定<li className={active ? 'active' : ''}><h3>{name}</h3><p>单价：{price}</p><p>数量：<span className='remove' onClick={()=>handleNumberChange(id, -1)}>-</span><span>{number}</span><span className='add' onClick={()=>handleNumberChange(id, +1)}>+</span></p><div className='cartbtn' onClick={() => handleAdd(id)}>{active ? '取消购买' : '添加购物车'}</div></li>)
}function Cart() {const [list, setList] = useImmer([])useEffect(() => {axios.get('/cartData.json').then((res) => {if (res.data.errcode === 0) {//map来给购物车添加setList(res.data.list.map((item) => ({ ...item, active: false })))}})}, [])const handleAdd = (id) => {setList((draft) => {const value = draft.find((item) => item.id === id)value.active = !value.active})}const handleNumberChange = (id, num) => {setList((draft) => {const value = draft.find((item) => item.id === id)if (value.number === 0 && num < 0) {return}value.number += num})}return (<div className='cart'><ul>{list.map((item) => (<Itemkey={item.id}{...item}handleAdd={()=>handleAdd(item.id)}handleNumberChange={(num)=>handleNumberChange(item.id,num)}//注意传参问题，前面的num是onClick传递的/>))}</ul><div className='all'>总金额：<span>5</span>元</div></div>)
}
export default Cart

如果你写成 handleNumberChange={() => handleNumberChange(item.id, num)}，num 的值无法动态传递，因为 num 是在 Item 组件的 onClick 事件中才确定的。

加入计算总金额功能，用filter选择被加入购物车的商品，reduce计算

 const all = list.filter((item) => item.active).reduce((init, item) => init + item.number * item.price, 0)

每次改变状态时都会重新渲染，提升性能，使用memo，只有props不同的时候才会渲染

里面包的是函数，之前学的useCallback可以解决函数被Object.Is()判别为不同的问题

import { func } from 'prop-types'
import './购物车样式.css'
import axios from 'axios'
import { useImmer } from 'use-immer'
import { memo, useCallback, useEffect } from 'react'const Item = memo(function Item({id,name,price,number,active,handleAdd,handleNumberChange,
}) {console.log('如果被渲染了，我就会出现')return (//active初始根据active的值判定<li className={active ? 'active' : ''}><h3>{name}</h3><p>单价：{price}</p><p>数量：<span className='remove' onClick={() => handleNumberChange(id, -1)}>-</span><span>{number}</span><span className='add' onClick={() => handleNumberChange(id, +1)}>+</span></p><div className='cartbtn' onClick={() => handleAdd(id)}>{active ? '取消购买' : '添加购物车'}</div></li>)
})function Cart() {const [list, setList] = useImmer([])const all = list.filter((item) => item.active).reduce((init, item) => init + item.number * item.price, 0)useEffect(() => {axios.get('/cartData.json').then((res) => {if (res.data.errcode === 0) {//map来给购物车添加setList(res.data.list.map((item) => ({ ...item, active: false })))}})}, [])const handleAdd = useCallback((id) => {setList((draft) => {const value = draft.find((item) => item.id === id)value.active = !value.active})})const handleNumberChange = useCallback((id, num) => {setList((draft) => {const value = draft.find((item) => item.id === id)if (value.number === 0 && num < 0) {return}value.number += num})})return (<div className='cart'><ul>{list.map((item) => (<Itemkey={item.id}{...item}handleAdd={() => handleAdd(item.id)}handleNumberChange={(num) => handleNumberChange(item.id, num)} //注意传参问题，前面的num是onClick传递的/>))}</ul><div className='all'>总金额：<span>{all}</span>元</div></div>)
}
export default Cart

这下基本就写完了

千峰React:案例二

完成对html文档还有css的引入，引入一下数据： import { func } from prop-types import ./购物车样式.css import axios from axios import { useImmer } from use-immer import { useEffect } from reactfunction Item() {return (<li classNameacti…...

编程日记 2025/9/11 15:32:52

Junit框架缺点

JUnit 是 Java 生态中最流行的单元测试框架，广泛应用于单元测试和集成测试中。尽管它功能强大且易于使用，但也存在一些缺陷和局限性。以下是 JUnit 的主要缺点： 1. 功能相对固定问题：JUnit 的核心功能相对固定，缺乏灵…...

编程日记 2025/9/11 19:28:56

计算机毕业设计SpringBoot+Vue.js公司日常考勤系统(源码+文档+PPT+讲解)

温馨提示：文末有 CSDN 平台官方提供的学长联系方式的名片！ 温馨提示：文末有 CSDN 平台官方提供的学长联系方式的名片！ 温馨提示：文末有 CSDN 平台官方提供的学长联系方式的名片！ 作者简介：Java领…...

编程日记 2025/9/8 14:22:48

Python线程池知多少

目录目标 Python版本官方文档概述线程池实战创建线程池的基本语法批量提交任务生产者&消费者模型目标掌握线程池的基本概念和使用方法。 Python版本 Python 3.9.18 官方文档 concurrent.futures — Launching parallel taskshttps://docs.python.org/3…...

编程日记 2025/9/11 19:30:02

MySQL数据库入门到大蛇尚硅谷宋红康老师笔记高级篇 part 6

从6到12章将会是重中之重,请一定好好看第06章_索引的数据结构 1.为什么使用索引索引是存储引擎用于快速找到数据记录的一种数据结构，就好比一本教课书的目录部分，通过目录中找到对应文章的页码，便可快速定位到需要的文章。MySQL中也是一…...

编程日记 2025/9/11 13:06:45

C++动态与静态转换区别详解

文章目录前言一、类型检查的时机二、安全性三、适用场景四、代码示例对比总结前言在 C 中，dynamic_cast 和 static_cast 是两种不同的类型转换操作符，主要区别体现在类型检查的时机、安全性和适用场景上。以下是它们的核心区别： 一、类…...

编程日记 2025/9/11 19:32:32

面向AI 的前端发展及初识大模型

AI带来的开发范式迁移随着AI的涌现，对前端的发展也有着非常大的影响，总结过去前端的发展路径，目前应该属于又一次的大规模的开发范式迁移阶段。上一个阶段是从jquery到React/Vue/Angular迁移（jquery之前的就不讨论了&#xff09…...

编程日记 2025/9/11 19:28:56

Java入门的基础学习

Java的基础语法知识一初始Java二 Java数据类型和变量1.字面常量2.数据类型基本数据类型引用数据类型 3.变量整型变量浮点型变量字符型变量布尔型变量 4.类型转化和提升类型转化类型提升三运算符1.算数运算符2.关系操作符3.逻辑运算符：&&，||&…...

编程日记 2025/9/10 17:41:46

万字详解 MySQL MGR 高可用集群搭建

文章目录 1、MGR 前置介绍 1.1、什么是 MGR1.2、MGR 优点1.3、MGR 缺点1.4、MGR 适用场景 2、MySQL MGR 搭建流程 2.1、环境准备2.2、搭建流程 2.2.1、配置系统环境2.2.2、安装 MySQL2.2.3、配置启动 MySQL2.2.4、修改密码、设置主从同步2.2.5、安装 MGR 插件 3、MySQL MGR 故…...

编程日记 2025/9/11 19:32:32

脚本无法获取响应主体（原因：CORS Missing Allow Credentials）

背景： 前端的端口号8080，后端8000。需在前端向后端传一个参数，让后端访问数据库去检测此参数是否出现过。涉及跨域请求，一直有这个bug是404文件找不到。在修改过程当中不小心删除了一段代码，出现了这个bug&#xff0…...

编程日记 2025/9/11 19:30:02

GD32F450 使用

GB32F450使用 1. 相关知识2. 烧写程序3. SPI3.1 spi基础3.2 spi代码 4. 串口4.1 串口引脚4.2 串口通信代码问题记录1. 修改晶振频率注意：GD32F450 总共有三种封装形式，本文所述的相关代码和知识，均为 GD32F450IX 系列。 1. 相关知识参数配…...

编程日记 2025/9/8 4:17:48

神经网络代码入门解析

神经网络代码入门解析 import torch import matplotlib.pyplot as pltimport randomdef create_data(w, b, data_num): # 数据生成x torch.normal(0, 1, (data_num, len(w)))y torch.matmul(x, w) b # 矩阵相乘再加bnoise torch.normal(0, 0.01, y.shape) # 为y添加噪声…...

编程日记 2025/9/6 3:21:40

Android 数据库查询对比（APN案例）

功能背景 APN 数据通常存储在数据库中，由TelephonyProvider提供。当用户进入APN设置界面时，Activity会启动，AOSP源码通过ContentResolver查询APN数据。关键分析点在于这个查询操作是否在主线程执行，因为主线程上的耗时操作会导致…...

编程日记 2025/9/11 19:31:41

神卓 S500 异地组网设备实现监控视频异地组网的详细步骤

一、设备与环境准备硬件清单主设备：神卓 S500 异地组网路由器 1子设备：神卓 S500 或兼容设备 N（需通过官网认证）监控设备：支持 RTSP/ONVIF 协议的 NVR、摄像头网络要求：各网点需稳定联网（推荐…...

编程日记 2025/9/9 1:49:15

golang安装(1.23.6)

1．切换到安装目录 cd /usr/local 2．下载安装包 wget https://go.dev/dl/go1.23.6.linux-amd64.tar.gz 3．解压安装包 sudo tar -C /usr/local -xzf go1.23.6.linux-amd64.tar.gz 4．配置环境变量 vi /etc/profile export PATH$…...

编程日记 2025/9/9 20:23:45

leetcode35.搜索插入位置

题目： 给定一个排序数组和一个目标值，在数组中找到目标值，并返回其索引。如果目标值不存在于数组中，返回它将会被按顺序插入的位置。请必须使用时间复杂度为 O(log n) 的算法。示例 1: 输入: nums [1,3,5,6], target 5 输出…...

编程日记 2025/9/9 19:23:45

LeetCode第57题_插入区间

LeetCode 第57题：插入区间题目描述给你一个无重叠的 ，按照区间起始端点排序的区间列表。在列表中插入一个新的区间，你需要确保列表中的区间仍然有序且不重叠（如果有必要的话，可以合并区间）。难度中…...

编程日记 2025/9/9 12:33:59

人工智能之数学基础：线性代数中矩阵的运算

本文重点矩阵的运算在解决线性方程组、描述线性变换等方面发挥着至关重要的作用。通过对矩阵进行各种运算，可以简化问题、揭示问题的本质特征。在实际应用中，我们可以利用矩阵运算来处理图像变换、数据分析、电路网络等问题。深入理解和掌握矩阵的运算，对于学习线性代数以…...

编程日记 2025/9/7 0:11:09

SQL Server 创建用户并授权

创建用户前需要有一个数据库，创建数据库命令如下： CREATE DATABASE [数据库名称]; CREATE DATABASE database1;一、创建登录用户方式1：SQL命令命令格式：CREATE LOGIN [用户名] WITH PASSWORD ‘密码’; 例如，创…...

编程日记 2025/9/7 7:01:57

MySQL双主搭建-5.7.35

文章目录上传并安装MySQL 5.7.35双主复制的配置实例一：172.25.0.19：实例二：172.25.0.20： 配置复制用户在实例 1 （172.25.0.19）上执行：在实例 2 （172.25.0.20）上执行&…...

编程日记 2025/9/8 19:16:31

RNN实现精神分裂症患者诊断（pytorch）

RNN理论知识 RNN（Recurrent Neural Network，循环神经网络） 是一种专门用于处理序列数据（如时间序列、文本、语音、视频等）的神经网络。与普通的前馈神经网络（如 MLP、CNN）不同，RNN…...

编程日记 2025/9/6 21:12:33

Python中字符串的常用操作

一、r原样输出在 Python 中，字符串前加 r（即 r"string" 或 rstring）表示创建一个原始字符串（raw string）。下面详细介绍原始字符串的特点、使用场景及与普通字符串的对比。特点忽略转义字符&#xff1…...

编程日记 2025/9/7 1:39:39

uniapp 本地数据库多端适配实例(根据运行环境自动选择适配器)

项目有个需求，需要生成app和小程序，app支持离线数据库，如果当前没有网络提醒用户开启离线模式，所以就随便搞了下，具体的思路就是： 一个接口和多个实现类（类似后端的模板设计模式）&am…...

编程日记 2025/9/9 10:29:26

Spring Cloud Gateway 整合Spring Security

做了一个Spring Cloud项目，网关采用 Spring Cloud Gateway，想要用 Spring Security 进行权限校验，由于 Spring Cloud Gateway 采用 webflux ，所以平时用的 mvc 配置是无效的，本文实现了 webflu 下的登陆校验。 1. Sec…...

编程日记 2025/9/6 18:11:13

【异地访问本地DeepSeek】Flask+内网穿透，轻松实现本地DeepSeek的远程访问

写在前面：本博客仅作记录学习之用，部分图片来自网络，如需引用请注明出处，同时如有侵犯您的权益，请联系删除！ 文章目录前言依赖Flask构建本地网页访问LM Studio 开启网址访问DeepSeek 调用模板Flask 访问本…...

编程日记 2025/9/10 8:51:07

Windows对比MacOS

Windows对比MacOS 文章目录 Windows对比MacOS1-环境变量1-Windows添加环境变量示例步骤 1：打开环境变量设置窗口步骤 2：添加系统环境变量 2-Mac 系统添加环境变量示例步骤 1：打开终端步骤 2：编辑环境变量配置文件步骤 3&#xff1…...

编程日记 2025/9/10 19:33:48

React实现无缝滚动轮播图

实现效果： 由于是演示代码，我是直接写在了App.tsx里面在文件位置如下： App.tsx代码如下： import { useState, useEffect, useCallback, useRef } from "react"; import { ImageContainer } from "./view/ImageC…...

编程日记 2025/9/9 9:53:19

Ubuntu20.04确认cuda和cudnn已经安装成功

当我们通过官网安装cuda和cudnn时，终端执行完命令后我们仍不能确定是否已经安装成功。接下来教大家用几句命令测试。 cuda 检测版本号 nvcc -V如果输出如下，则安装成功。可以看到版本号是11.2 cudnn检测版本号有两种命令：如果你的cudn…...

编程日记 2025/9/7 1:39:40

sqlilab 46 关（布尔、时间盲注）

sqlilabs 46关（布尔、时间盲注） 46关有变化了，需要我们输入sort，那我们就从sort1开始递增测试： 发现测试到sort4就出现报错： 我们查看源码： 从图中可看出：用户输入的sort值被用于查…...

编程日记 2025/9/3 21:49:21

AI时代保护自己的隐私

人工智能最重要的就是数据，让我们面对现实，大多数人都不知道他们每天要向人工智能提供多少数据。你输入的每条聊天记录，你发出的每条语音命令，人工智能生成的每张图片、电子邮件和文本。我建设了一个网站(haptool.com)&#xff0c…...

编程日记 2025/9/10 21:40:23

模型优化之强化学习（RL）与监督微调（SFT）的区别和联系

强化学习（RL）与监督微调（SFT）是机器学习中两种重要的模型优化方法，它们在目标、数据依赖、应用场景及实现方式上既有联系又有区别。想了解有关deepseek本地训练的内容可以看我的文章： 本地基于GGUF部署的…...

编程日记 2025/9/9 1:55:17

Buildroot 添加自定义模块-内置文件到文件系统

目录概述实现步骤1. 创建包目录和文件结构2. 配置 Config.in3. 定义 cp_bin_files.mk4. 添加源文件install.shmy.conf 5. 配置与编译概述 Buildroot 是一个高度可定制和模块化的嵌入式 Linux 构建系统，适用于从简单到复杂的各种嵌入式项目. buildroot的源码中bui…...

编程日记 2025/9/10 21:14:40

蓝牙接近开关模块感应开锁手机靠近解锁支持HID低功耗

ANS-BT101M是安朔科技推出的蓝牙接近开关模块，低功耗ble5.1，采用UART通信接口，实现手机自动无感连接，无需APP，人靠近车门自动开锁，支持苹果、安卓、鸿蒙系统，也可以通过手机手动开锁或上锁&…...

编程日记 2025/9/10 17:07:12

计算机毕业设计SpringBoot+Vue.js基于工程教育认证的计算机课程管理平台(源码+文档+PPT+讲解)

编程日记 2025/9/7 4:14:56

企业知识库搭建：14款开源与免费系统选择

本文介绍了以下14 款知识库管理系统：1.Worktile；2.PingCode；3.石墨文档； 4. 语雀； 5. 有道云笔记； 6. Bitrix24； 7. Logseq等。在如今的数字化时代，企业和团队面临着越来越多的信息…...

编程日记 2025/9/9 6:08:31

蓝桥杯（握手问题）

小蓝组织了一场算法交流会议，总共有 50 人参加了本次会议。在会议上，大家进行了握手交流。按照惯例他们每个人都要与除自己以外的其他所有人进行一次握手 (且仅有一次)。但有 7个人，这 7 人彼此之间没有进行握手 (但这 7 人与除这 7 人以外…...

编程日记 2025/9/8 16:55:37

如何使用 Jenkins 实现 CI/CD 流水线：从零开始搭建自动化部署流程

如何使用 Jenkins 实现 CI/CD 流水线：从零开始搭建自动化部署流程在软件开发过程中，持续集成（CI）和持续交付（CD）已经成为现代开发和运维的标准实践。随着代码的迭代越来越频繁，传统的手动部署方式不仅低效，而且容易出错。为了提高开发效率和代码质量，Jenkins作为一款…...

编程日记 2025/9/8 5:20:57

c++字符编码/乱码问题

基本概念 c11版本引入了char16_t和char32_t两个类型，他们的特点分别如下： char16_t 16位的unicode字符类型用于表示UTF-16编码大小：2字节字面量前缀：u char32_t 32位unicode字符类型用于表示UTF-32编码大小：4字节…...

编程日记 2025/9/5 10:24:36

侯捷 C++ 课程学习笔记：深入理解类与继承

文章目录每日一句正能量一、课程背景二、学习内容：类与继承（一）类的基本概念1. 类的定义与实例化2. 构造函数与析构函数 （二）继承1. 单继承与多继承2. 虚函数与多态三、学习心得四、总结每日一句正能量有种承担&am…...

编程日记 2025/9/10 21:30:48

初始化列表

一：声明，定义，赋值的区别 ①：声明这里，int _year; int _month;int _day; 是成员变量的声明，它们告诉编译器： 类 Date中有三个成员变量_year和 _month和_day。它们的类型分别都是 int 此…...

编程日记 2025/9/7 19:08:53

7.1 - 定时器之中断控制LED实验

文章目录 1 实验任务2 系统框图3 软件设计 1 实验任务本实验任务是通过CPU私有定时器的中断，每 200ms 控制一次PS LED灯的亮灭。 2 系统框图 3 软件设计注意事项： 定时器中断在收到中断后，只需清除中断状态，无需禁用中断、启…...

编程日记 2025/9/6 20:46:37

Pytest之fixture的常见用法

文章目录 1.前言2.使用fixture执行前置操作3.使用conftest共享fixture4.使用yield执行后置操作 1.前言在pytest中，fixture是一个非常强大和灵活的功能，用于为测试函数提供固定的测试数据、测试环境或执行一些前置和后置操作等， 与setup和te…...

编程日记 2025/9/11 0:11:27

【分库分表】基于mysql+shardingSphere的分库分表技术

目录 1.什么是分库分表 2.分片方法 3.测试数据 4.shardingSphere 4.1.介绍 4.2.sharding jdbc 4.3.sharding proxy 4.4.两者之间的对比 5.留个尾巴 1.什么是分库分表分库分表是一种场景解决方案，它的出现是为了解决一些场景问题的，哪些场景喃…...

编程日记 2025/9/6 21:22:49

合并两个有序链表：递归与迭代的实现分析

合并两个有序链表：递归与迭代的实现分析在算法与数据结构的世界里，链表作为一种基本的数据结构，经常被用来解决各种问题。特别是对于有序链表的合并，既是经典面试题，也是提高编程能力的重要练习之一。合并两个有序链…...

编程日记 2025/9/11 7:53:47

HTML AI 编程助手

HTML AI 编程助手引言随着人工智能技术的飞速发展，编程领域也迎来了新的变革。HTML，作为网页制作的基础语言，与AI技术的结合，为开发者带来了前所未有的便利。本文将探讨HTML AI编程助手的功能、应用场景以及如何利用它提高编程…...

编程日记 2025/9/6 17:24:01

备战蓝桥杯Day11 DFS

DFS 1.要点 (1)朴素dfs 下面保存现场和恢复现场就是回溯法的思想，用dfs实现，而本质是用递归实现，代码框架: ans; //答案，常用全局变量表示 int mark[N]; //记录状态i是否被处理过 …...

编程日记 2025/9/9 10:12:29

Oracle 认证为有哪几个技术方向

Oracle 认证技术方向，分别是数据库管理、开发、云平台，每个方向都有不同的学习等级数据库运维方向 Oracle Certified Professional（OCP）：19c OCA内容已和OCP合并 OCP 19c属于oracle认证专家，要求考生掌握深…...

编程日记 2025/9/9 12:03:16

25物理学研究生复试面试问题汇总物理学专业知识问题很全！物理学复试全流程攻略物理学考研复试调剂真题汇总

正在为物理考研复试专业面试发愁的你，是不是不知道从哪开始准备？ 学姐告诉你，其实物理考研复试并没有你想象的那么难！只要掌握正确的备考方法，稳扎稳打，你也可以轻松拿下高分！今天给大家准备了…...

编程日记 2025/9/10 6:05:18

网络安全技术与应用

文章详细介绍了网络安全及相关技术，分析了其中的一类应用安全问题——ＰＣ机的安全问题，给出了解决这类问题的安全技术——ＰＣ防火墙技术。 １ 网络安全及相关技术自２０世纪…...

编程日记 2025/9/9 13:09:37

APISIX Dashboard上的配置操作

文章目录登录配置路由配置消费者创建后端服务项目配置上游再创建一个路由测试登录 http://192.168.10.101:9000/user/login?redirect%2Fdashboard 根据docker 容器里的指定端口： 配置路由通过apisix 的API管理接口来创建（此路由，直接…...

编程日记 2025/9/9 22:57:31

相关文章：