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

React（10）

news 来源：原创 2025/9/14 14:04:37

项目实践--创建项目

在store的modules中创建相关的子仓库暴露到仓库index文件中

导入creatSlice和axios

创建仓库和数据的异步修改方法

// 编写store
// 导入createSlice和axios
import { createSlice } from "@reduxjs/toolkit";
import axios from "axios";
// 创建slice
const foodsStore = createSlice({name: "foods",initialState: {foodsList: [],},//修改foods的数据 需要配合异步请求函数reducers: {setFoodsList(state, action) {state.foodsList = action.payload;},},
});

编写异步请求函数

// 导出actions和reducer
const { setFoodsList } = foodsStore.actions;
const reducer = foodsStore.reducer;// 异步获取
const fetchFoodsList = () => {return async (dispatch) => {const res = await axios.get("http://localhost:3004/takeaway");const data = res.data;dispatch(setFoodsList(data));};
};

这存在一个后端接口返回值count 不准确的情况使用双重foreach 将count变成1初始化

// 异步获取
const fetchFoodsList = () => {return async (dispatch) => {const res = await axios.get("http://localhost:3004/takeaway");const data = res.data;//将每一个子项里的foods里的每一项的的count都修改为1data.forEach((item) => {item.foods.forEach((food) => {food.count = 1;});});console.log(data);dispatch(setFoodsList(data));};
};

导出

// 导出fetchFoodsList
export { fetchFoodsList };
export default reducer;

store的index注册使用

// 导入 configureStore 和 foodsReducer
// 使用 configureStore 创建 store
import { configureStore } from '@reduxjs/toolkit';
import foodsReducer from './modules/takeaway';const store= configureStore({reducer: {foods: foodsReducer,},
});
export default store;

在App.js中调用仓库方法映射数据

// 导入useDispatch和useEffect和fetchFoodsList
import { useDispatch } from "react-redux";
import { useEffect } from "react";
import { fetchFoodsList } from "./store/modules/takeaway";

在App函数中调用

 // 触发异步请求// 使用useDispatch获取dispatchconst dispatch = useDispatch();// 使用useEffect触发异步请求useEffect(() => {dispatch(fetchFoodsList());},[dispatch]);

使用仓库数据进行渲染

渲染数据使用useSelector进行渲染

const {foodsList}=useSelector((state)=>state.foods);

MENU菜单的渲染和点击出发css事件

1、仓库中新建一个控制点击事件的activeIndex变量

const foodsStore = createSlice({name: "foods",initialState: {foodsList: [],activeIndex:0},//修改foods的数据 需要配合异步请求函数reducers: {setFoodsList(state, action) {state.foodsList = action.payload;},setActiveIndex(state,action){state.activeIndex=action.payload;}},
});

导出相关函数方法

import classNames from 'classnames'
import './index.scss'
import { useDispatch, useSelector } from 'react-redux';
import { setActiveIndex } from '../../store/modules/takeaway';const Menu = () => {const { activeIndex,foodsList } = useSelector(state => state.foods);const menus = foodsList.map(item => ({ tag: item.tag, name: item.name }))const dispatch=useDispatch();return (<nav className="list-menu">{/* 添加active类名会变成激活状态 */}{menus.map((item, index) => {return (<divonClick={()=>dispatch(setActiveIndex(index))}key={item.tag}className={classNames('list-menu-item',activeIndex===index && 'active')}>{item.name}</div>)})}</nav>)
}export default Menu

使用activeIndex和index匹配方法进行css样式控制

并且使用这个值控制菜单列的显示（记得导入activeIndex）

  {/* 外卖商品列表 */}{foodsList.map((item,index) => {return (activeIndex===index &&  <FoodsCategorykey={item.tag}// 列表标题name={item.name}// 列表商品foods={item.foods}/>);})}

添加购物车

点击加号一个list数组进行添加如果是没有相关类目的就进行push 如果有就进行+1处理

首先添加一个cartList[] 设置相关方法

 addCart(state, action) {// 判断是添加过过类目数据，如果添加过就进行add  没有就进行pushconst item = state.cartList.find((item) => item.id === action.payload.id);if (item) {item.count++;} else {state.cartList.push(action.payload);}},

导出相关字段与方法

在加法按钮中添加相关方法

 <div className="goods-count"><spanclassName="plus"onClick={() =>dispatch(addCart({id,picture,name,unit,description,food_tag_list,month_saled,like_ratio_desc,price,tag,count,}))}>+</span></div>

React（10）

项目实践--创建项目在store的modules中创建相关的子仓库暴露到仓库index文件中导入creatSlice和axios 创建仓库和数据的异步修改方法 // 编写store // 导入createSlice和axios import { createSlice } from "reduxjs/toolkit"; import axios from "axios&…...

编程日记 2025/9/14 14:04:37

JAVA实战开源项目：靓车汽车销售网站(Vue+SpringBoot) 附源码

本文项目编号 T 093 ，文末自助获取源码 \color{red}{T093，文末自助获取源码} T093，文末自助获取源码目录一、系统介绍二、数据库设计三、配套教程3.1 启动教程3.2 讲解视频3.3 二次开发教程四、功能截图五、文案资料5.1 选题背景5.2 国内…...

编程日记 2025/9/8 12:28:39

【大语言模型】【整合版】DeepSeek 模型提示词学习笔记（散装的可以看我之前的学习笔记，这里只是归纳与总结了一下思路，内容和之前发的差不多）

以下是个人笔记的正文内容: 原文在FlowUs知识库上，如下截图。里面内容和这里一样，知识排版好看一点一、什么是 DeepSeek 1. DeepSeek 简介 DeepSeek 是一家专注于通用人工智能（AGI）的中国科技公司，主攻大模型研发与…...

编程日记 2025/9/2 13:32:37

网络安全扫描--基础篇

前言 1、了解互联网安全领域中日趋重要的扫描技术 2、了解在不同网络场景下扫描技术手段 3、熟悉linux下系统内核防护策略并能大件一个有效的系统防护体系 4、增强工作安全意识，并能有效的实践于工作场景中目录 1、熟悉主机扫描工具（fping，…...

编程日记 2025/9/14 3:23:57

Python网络安全脚本

🍅 点击文末小卡片 ，免费获取网络安全全套资料，资料在手，涨薪更快前言睡不着，那就起来学习其实base64模块很早之前用过今天做爬虫的时候有个URL需要用它来编码一下所以百度又学了一下遇到最大的问题就是python3和p…...

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

ElasticSearch查询指南：从青铜到王者的骚操作

ElasticSearch查询指南：从青铜到王者的骚操作本文来源于笔者的CSDN原创，由于掘金>已经去掉了转载功能，所以只好重新上传，以下图片依然保持最初发布的水印（如CSDN水印）。（以后属于本人原创均…...

编程日记 2025/9/14 14:02:22

四、详细解释：网络与连接操作命令

1. ping – 测试网络连通性用途：检查与目标主机之间的网络连接是否通畅。语法： ping [选项] 目标IP或域名常用选项： -c 次数：指定发送数据包的次数（默认无限次，需手动 CtrlC 终止）。-i 秒数&…...

编程日记 2025/9/12 1:17:08

前端关于Cursor编辑器的了解与深度使用及对工作的便利

1. 什么是 Cursor 编辑器？ Cursor 是一款基于 AI 的现代代码编辑器，类似于 VS Code，但内置了强大的 AI 功能。它的核心目标是帮助开发者更快、更智能地编写代码。主要特点： AI 驱动的代码补全：提供上下文相关的智能代码建议。代码生成与修复：通过自然语言描述生成代码…...

编程日记 2025/9/11 17:19:48

Java Junit框架

JUnit 是一个广泛使用的 Java 单元测试框架，用于编写和运行可重复的测试。它是 xUnit 家族的一部分，专门为 Java 语言设计。JUnit 的主要目标是帮助开发者编写可维护的测试代码，确保代码的正确性和稳定性。 JUnit 的主要特点注解驱动&…...

编程日记 2025/9/13 18:57:57

高级自动化测试常见面试题（Web、App、接口）

一、Web自动化测试 1.Selenium中hidden或者是display ＝ none的元素是否可以定位到？ 不能,可以写JavaScript将标签中的hidden先改为0，再定位元素 2.Selenium中如何保证操作元素的成功率？也就是说如何保证我点击的元素一定是可以…...

编程日记 2025/9/14 14:04:36

京准电钟解读：为何不能用网络上的NTP时间源服务器

京准电钟解读：为何不能用网络上的NTP时间源服务器京准电钟解读：为何不能用网络上的NTP时间源服务器通常是因为以下几个方面的原因： 安全性问题： NTP服务器可能被黑客操纵或成为攻击的目标，如果服务器被攻破&…...

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

Android OpenGLES2.0开发（十一）：渲染YUV

人生如逆旅，我亦是行人 Android OpenGLES开发：EGL环境搭建Android OpenGLES2.0开发（一）：艰难的开始Android OpenGLES2.0开发（二）：环境搭建Android OpenGLES2.0开发（三&am…...

编程日记 2025/9/8 13:22:49

7种内外网数据交换方案全解析哪种安全、高效、合规？

内外网数据交换方案主要解决了企业跨网络数据传输中的安全、效率与合规性问题。通过采用先进的加密技术、高效的数据传输协议以及严格的审批和审计机制，该方案确保了数据在内外网之间的安全交换，同时提高了传输效率，并满足了企业对数据合规性…...

编程日记 2025/9/14 8:23:25

详解：事务注解 @Transactional

创作内容丰富的干货文章很费心力，感谢点过此文章的读者，点一个关注鼓励一下作者，激励他分享更多的精彩好文，谢谢大家！ Transactional 是 Spring Framework 中常用的注解之一，它可以被用于管理事务。通过使…...

编程日记 2025/9/13 22:59:33

2025最新Flask学习笔记（对照Django做解析）

前言：如果还没学Django的同学，可以看Django 教程 | 菜鸟教程，也可以忽略下文所提及的Django内容；另外，由于我们接手的项目大多都是前后端分离的项目，所以本文会跳过对模板的介绍，感兴趣的朋友可…...

编程日记 2025/9/12 13:55:14

大模型面试问题准备

1. BERT的多头注意力为什么需要多头？ 为了捕捉不同子空间的语义信息，每个头关注不同的方面，增强模型的表达能力 2. 什么是softmax上下溢出问题？ 问题描述： 上溢出：ye^x中，如果x取非常大的正数…...

编程日记 2025/9/8 11:57:33

FFmpeg 命令行全解析：高效音视频处理从入门到精通

FFmpeg FFmpeg 是一款开源的多媒体处理工具集，支持音视频编解码、格式转换、流媒体处理等全链路操作。核心功能与工具: 多媒体全链路支持支持 1000+ 音视频编解码格式（如 H.264、HEVC、AV1）和协议（RTMP、RTSP、HLS），覆盖录制、转码、流化等全流程。提供三大核心工具： …...

编程日记 2025/9/14 14:03:35

在使用LomBok时编译器弹出java: 错误: 不支持发行版本 5该怎么解决的四种方案

你遇到的错误 java: 错误: 不支持发行版本 5 表明你的代码正在尝试使用 Java 5 或更早版本的编译器，而这些版本已经不再受支持，并且可能与你当前使用的 JDK 版本不兼容。以下是解决此问题的步骤： 1. 检查项目语言级别确保你的项目配置为使…...

编程日记 2025/9/9 0:32:03

【数据结构】(12) 反射、枚举、lambda 表达式

一、反射 1、反射机制定义及作用反射是允许程序在运行时检查和操作类、方法、属性等的机制，能够动态地获取信息、调用方法等。换句话说，在编写程序时，不需要知道要操作的类的具体信息，而是在程序运行时获取和使用。 2、反射机制…...

编程日记 2025/9/14 14:03:35

在VSCode中安装jupyter跑.ipynb格式文件

个人用vs用的较多，不习惯在浏览器单独打开jupyter，看着不舒服，直接上教程。 1、在你的环境中pip install ipykernel 2、在vscode的插件中安装jupyter扩展 3、安装扩展后，打开一个ipynb文件，并且在页面右上角配置内核 …...

编程日记 2025/9/4 4:12:32

WordPress网站502错误全面排查与解决指南

502 Bad Gateway错误是WordPress站长最常遇到的服务器问题之一，它意味着服务器作为网关或代理时，未能从上游服务器获取有效响应。针对WP可能出现的502问题，本文提供一些基础到进阶的解决方案供大家参考:) 一、502错误的本质和核心诱因 502错误属于HTTP状态码中的5xx系列，…...

编程日记 2025/9/9 17:53:31

锂电池保护板测试仪：电池安全的守护者与创新驱动力

在新能源产业蓬勃发展的今天，锂电池以其高能量密度、长循环寿命和环保特性，成为电动汽车、无人机、便携式电子设备等领域不可或缺的能量来源。然而，锂电池的安全性和稳定性一直是行业关注的焦点。为了确保锂电池在各种应用场景下的可靠运行&a…...

编程日记 2025/9/8 21:16:20

flowable-ui 的会签功能实现

场景：在进行智慧保时通开发时，有个协作合同入围功能，这个功能的流程图里有个评审小组，这个评审小组就需要进行会签操作，会签完成后，需要依据是否有不通过的情况选择下一步走的流程思考步骤： 首…...

编程日记 2025/9/11 1:25:53

Python学习第十七天之PyTorch保姆级安装

PyTorch安装与部署一、准备工作二、pytorch介绍三、CPU版本pytorch安装1. 创建虚拟环境2. 删除虚拟环境1. 通过环境名称删除2. 通过环境路径删除 3. 配置镜像源4. 安装pytorch1. 首先激活环境变量2. 进入pytorch官网，找到安装指令 5. 验证pytorch是否安装成功四、…...

编程日记 2025/9/9 20:30:08

Kibana：Spotify Wrapped 第二部分：深入挖掘数据

作者：来自 Elastic Philipp Kahr 我们将比以往更深入地探究你的 Spotify 数据并探索你甚至不知道存在的联系。在由 Iulia Feroli 撰写的本系列的第一部分中，我们讨论了如何获取 Spotify Wrapped 数据并在 Kibana 中对其进行可视化。在第 2 部分中&#…...

编程日记 2025/9/9 19:22:49

半导体晶圆精控：ethercat转profient网关数据提升制造精度

数据采集系统通过网关连接离子注入机，精细控制半导体晶圆制造过程中的关键参数。在半导体制造中，晶圆制造设备的精密控制是决定产品性能的关键因素。某半导体工厂采用耐达讯Profinet转EtherCAT协议网关NY-PN-ECATM，将其数据采集系统与离子注…...

编程日记 2025/9/12 12:17:36

CMake小结2（PICO为例）

1 前言之前写过一篇cmake，不过很简单：CMake小结_cmake ${sources}-CSDN博客构建系统现在真的太多了，完全学不过来的感觉，meson，gardle，buildroot， Maven。。。我是真的有点放弃治疗了。之前…...

编程日记 2025/9/14 14:04:36

5. Go 方法(结构体的方法成员)

Go语言没有传统的 class ，为了让函数和结构体能够关联，Go引入了“方法”的概念。当普通函数添加了接收者（receiver）后，就变成了方法。一、函数和方法示例 // 普通函数 func Check(s string) string {return s }//…...

编程日记 2025/9/11 20:08:39

Linux查看和处理文件内容

1.文本文件有字符集编码的文件如：ASCII、UTF-8、Unicode、ANSI等常见的文本文件 txt、xml、conf、properties、yml等配置文件、日志文件、源代码 2.二进制文件除文本文件外的文件如：可执行程序、图片、音频、视频 3.cat 格式：…...

编程日记 2025/9/10 12:49:31

关于网络端口探测：TCP端口和UDP端口探测区别

网络端口探测是网络安全领域中的一项基础技术，它用于识别目标主机上开放的端口以及运行在这些端口上的服务。这项技术对于网络管理和安全评估至关重要。在网络端口探测中，最常用的两种协议是TCP（传输控制协议）和UDP（用…...

编程日记 2025/9/13 19:43:13

Spring IoC和DI

Spring IoC和DI 1 IOC1.1 什么是IoC？1.2 IoC 介绍1.2.1 传统程序开发1.2.2 问题分析1.2.3 IoC程序开发1.2.3 IoC 优势 1.3 DI 介绍 2. IoC & DI 使⽤IoC 详解Bean的存储1.1 Controller（控制器存储） 1.2 Service（服务存储&…...

编程日记 2025/9/13 5:09:08

centos9之ESXi环境下安装

一、centos9简介 CentOS Stream 9是一个基于RHEL（Red Hat Enterprise Linux）的开源操作系统。它是CentOS Stream系列的最新版本。CentOS Stream是一个中间发行版，位于RHEL和Fedora之间，旨在提供更及时的软件更新和新功能。CentOS …...

编程日记 2025/9/8 18:18:04

【论文学习】基于规模化Transformer模型的低比特率高质量语音编码

以下文章基于所提供的文档内容撰写，旨在对该论文“Scaling Transformers for Low-Bitrate High-Quality Speech Coding”进行较为系统和深入的分析与总结。论文地址：https://arxiv.org/pdf/2411.19842 一、研究背景与动机自20世纪70年代以来&#xff…...

编程日记 2025/9/13 10:24:20

Docker 2025/2/24

用来快速构建、运行和管理应用的工具。帮助部署。快速入门代码略解释 docker run :创建并运行一个容器，-d是让容器在后台运行 --name mysql :给容器起个名字，必须唯一 -p 3306:3306 :设置端口映射 -e KEYVALUE :是设置环境变量 mysql :指定运行的…...

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

Rust语言基础知识详解【一】

1.在windows上安装Rust Windows 上安装 Rust 需要有 C 环境，以下为安装的两种方式： 1. x86_64-pc-windows-msvc（官方推荐） 先安装 Microsoft C Build Tools，勾选安装 C 环境即可。安装时可自行修改缓存路径与安装路…...

编程日记 2025/9/14 4:38:29

Kronecker分解（K-FAC）：让自然梯度在深度学习中飞起来

Kronecker分解（K-FAC）：让自然梯度在深度学习中飞起来在深度学习的优化中，自然梯度下降（Natural Gradient Descent）是一个强大的工具，它利用Fisher信息矩阵（FIM）调整梯度…...

编程日记 2025/9/14 0:04:08

Ubutu部署WordPress

前言什么是word press WordPress是一种使用PHP语言开发的建站系统，用户可以在支持PHP和MySQL数据库的服务器上架设WordPress。它是一个开源的内容管理系统（CMS），允许用户构建动态网站和博客。现在的WordPress已经强大到几乎可以…...

编程日记 2025/9/14 9:10:45

请解释 React 中的 Hooks，何时使用 Hooks 更合适？

一、Hooks 核心理解 1. 什么是 Hooks？ Hooks 是 React 16.8 引入的函数式编程范式，允许在函数组件中使用状态管理和生命周期能力。就像给函数组件装上了"智能芯片"，让原本只能做简单展示的组件具备了处理复杂逻辑的能力。 2. 类…...

编程日记 2025/9/10 15:57:55

1、在桌面新建idea.desktop vim idea.desktop [Desktop Entry] EncodingUTF-8 NameIntelliJ IDEA CommentIntelliJ IDEA Exec/home/software/idea-2021/bin/idea.sh Icon/home/software/idea-2021/bin/idea.svg Terminalfalse TypeApplication CategoriesApplication;Developm…...

编程日记 2025/9/13 9:03:55

MENU菜单的渲染和点击出发css事件

添加购物车

相关文章：