react中useReducer若有多个值怎么操作?

initialState 包含多个对象值时,你的 reducer 函数需要针对每个属性维护其各自的状态更新逻辑。reducer 函数应该返回一个新的状态对象,其中包含了所有必要的属性,保持未更改的属性不变,同时更新那些需要变化的属性。

下面是一个包含多个状态属性的 initialState 的例子,以及如何在 reducer 函数中处理这种复杂的状态:

const initialState = {count: 0,toggle: false,text: ''
};function reducer(state, action) {switch (action.type) {case 'increment':return { ...state, count: state.count + 1 };case 'decrement':return { ...state, count: state.count - 1 };case 'reset':return { ...state, count: initialState.count };case 'toggle':return { ...state, toggle: !state.toggle };case 'setText':return { ...state, text: action.payload };default:throw new Error();}
}function App() {const [state, dispatch] = useReducer(reducer, initialState);return (<div><p>Count: {state.count}</p><p>Toggle: {state.toggle ? 'On' : 'Off'}</p><p>Text: {state.text}</p><button onClick={() => dispatch({ type: 'increment' })}>+</button><button onClick={() => dispatch({ type: 'decrement' })}>-</button><button onClick={() => dispatch({ type: 'reset' })}>Reset Count</button><button onClick={() => dispatch({ type: 'toggle' })}>Toggle</button><inputtype="text"value={state.text}onChange={(e) => dispatch({ type: 'setText', payload: e.target.value })}/></div>);
}export default App;

在这个例子中,我们的 initialState 包含了三个属性:counttoggletext。我们的 reducer 函数针对每个动作类型定义了状态更新的逻辑。当处理一个动作时,我们使用了对象展开语法 ...state 来保持其他状态属性不变,同时只更新需要改变的属性。例如,当处理 increment 动作时,我们仅更新 count 属性,而 toggletext 属性则保持不变。

这种方法确保了状态的不可变性,这是 Redux 和 useReducer 钩子中非常重要的概念。不可变性意味着你永远不会直接改变状态,而是返回一个新的状态对象。这有助于避免复杂的状态更新问题,并允许React进行有效的组件重新渲染。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Vue阶段练习:初始化渲染、获取焦点

阶段练习主要承接Vue 生命周期-CSDN博客 &#xff0c;学习完该部分内容后&#xff0c;进行自我检测&#xff0c;每个练习主要分为效果显示、需求分析、静态代码、完整代码、总结 四个部分&#xff0c;效果显示和准备代码已给出&#xff0c;我们需要完成“完整代码”部分。 练习…

手撕spring框架(1)

相关系列 java中spring底层核心原理解析&#xff08;1&#xff09;-CSDN博客 java中spring底层核心原理解析(2)-CSDN博客 在以上详细讲解了spring底层核心原理&#xff0c;今天我们就来手写一个spring框架。主流程是&#xff1a; 1、编写启动类 2、依据ComponentScan设置的va…

MySQL__三大日志

文章目录 &#x1f60a; 作者&#xff1a;Lion J &#x1f496; 主页&#xff1a; https://blog.csdn.net/weixin_69252724 &#x1f389; 主题&#xff1a;Redis__三大日志 ⏱️ 创作时间&#xff1a;2024年04月30日 ———————————————— 对于MySQL来说, 有…

Gateway Predicate断言(谓词)

是什么 Spring Cloud Gateway匹配路由作为Spring WebFlux HandlerMapping基础设施的一部分。 Spring Cloud Gateway包含许多内置的路由谓词工厂。 所有这些谓词都匹配HTTP请求的不同属性。 您可以使用逻辑 and 语句来联合收割机组合多个路由谓词工厂。 Predicate就是为了实现一…

TiDB系列之:TiDB数据库账号权限,创建TiDB账号,创建数据库,创建表,插入数据

TiDB系列之:TiDB数据库账号权限,创建TiDB账号,创建数据库,创建表,插入数据 一、TiDB账号权限二、创建TiDB账号三、创建数据库,创建表,插入数据一、TiDB账号权限 TiDB账号权限可以分为系统级权限和对象级权限两种,具体如下: 系统级权限: ALL PRIVILEGES:拥有所有权限…

基于EBAZ4205矿板的图像处理:03使用VIO调试输出HDMI视频图像

基于EBAZ4205矿板的图像处理&#xff1a;03使用VIO调试输出HDMI视频图像 在zynq调试时VIO是真的方便&#xff0c;特此写一篇博客记录一下 先看效果 项目简介 下面是我的BD设计&#xff0c;vtc用于生成时序&#xff0c;注意&#xff0c;2021.2的vivado的vtcIP是v6.2版本&…

Stm32CubeMX 为 stm32mp135d 添加 adc

Stm32CubeMX 为 stm32mp135d 添加 adc 一、启用设备1. adc 设备添加2. adc 引脚配置2. adc 时钟配置 二、 生成代码1. optee 配置 adc 时钟和安全验证2. linux adc 设备 dts 配置 bringup 可参考&#xff1a; Stm32CubeMX 生成设备树 一、启用设备 1. adc 设备添加 启用adc设…

JAVA前端快速入门基础_javascript入门(03)

写在前面:本文用于快速学会简易的JS&#xff0c;仅做扫盲和参考作用 本章节主要介绍JS的事件监听 1.什么是事件监听 事件:是指发生在HTML端的事件&#xff0c;主要指以下几种。 1.按钮被点击 2.鼠标移动到元素上 3.按到了键盘 事件监听:当触发了事件时&#xff0c;JS会执行相…

vue3、element-plus递归实现动态菜单

vue3、element-plus递归实现动态菜单 使用场景&#xff1a;动态菜单为什么使用递归递归在动态菜单中的实现 使用场景&#xff1a;动态菜单 动态菜单是指菜单项的数量和层次结构可能是动态的&#xff0c;通常来自后端或用户输入。这些菜单的特征包括&#xff1a; 多层嵌套&…

真渗透小结

sql 有框就测 关注和数据库有交互的参数&#xff0c;如查询用户信息时的id字段 xss 有框就测 文件上传 有上传点就测&#xff0c;如头像上传文件上传 csrf 有功能点就测&#xff0c;例如增删改查 要看数据包参数的 文件包含 rce ssrf xxe 反序列化 数据包关注 网站资源文件…

【webrtc】MessageHandler 3: 基于线程的消息处理:以sctp测试为例

消息处理可以用于模拟发包处理G:\CDN\rtcCli\m98\src\net\dcsctp\socket\dcsctp_socket_network_test.cc 这个实现中,onMessage还是仅对了一种消息进行处理,就是接收则模式下,打印带宽。当然,可能程序有多个消息,分别在不同的onmessage中执行?SctpActor:以一个恒定的速率…

【大语言模型LLM】-基于ChatGPT搭建客服助手(1)

&#x1f525;博客主页&#xff1a;西瓜WiFi &#x1f3a5;系列专栏&#xff1a;《大语言模型》 很多非常有趣的模型&#xff0c;值得收藏&#xff0c;满足大家的收集癖&#xff01; 如果觉得有用&#xff0c;请三连&#x1f44d;⭐❤️&#xff0c;谢谢&#xff01; 长期不…

Springboot实现串口(RS232)控制【最新】

串口通讯协议(RS232)&#xff0c;没记错的话应该是属于物理层协议。这个一般都是用C去写的&#xff0c;但我们开发一个web系统还去依靠其他的&#xff0c;不如直接集成到我们的项目中来。   还是老规矩&#xff0c;代码可以直接cv就用。拒绝强制关注和留坑&#xff01; 目前没…

利用大型语言模型提升个性化推荐的异构知识融合方法

在推荐系统中&#xff0c;分析和挖掘用户行为是至关重要的&#xff0c;尤其是在美团外卖这样的平台上&#xff0c;用户行为表现出多样性&#xff0c;包括不同的行为主体&#xff08;如商家和产品&#xff09;、内容&#xff08;如曝光、点击和订单&#xff09;和场景&#xff0…

C++ 堆结构和堆排序(从顶到底/从底到顶的大顶堆)+ 优化

一、堆结构和堆排序 &#xff08;1&#xff09;heapInsert&#xff0c;向上调整大根堆 和 heapify&#xff0c;向下调整大根堆 // i位置的数&#xff0c;向上调整大根堆 // arr[i] x&#xff0c;x是新来的&#xff01;往上看&#xff0c;直到不比父亲大&#xff0c;或者来到0…

LLM系列(2):开源LLM Promp调优之道进阶指南

LLM系列(2):开源LLM Promp调优之道进阶指南 随着大模型在不同领域场景的应用,AI 技术的落地方式也有了很大的颠覆,基于大模型的 AI 技术方案重构已成为当前热点和未来趋势。但另一方面,面向不同领域场景构建行业专属大模型,对底层计算资源要求比较高,通常需要大量的 GPU…

升级cmake

要升级CMake&#xff0c;您可以按照以下步骤进行操作&#xff1a; 下载最新版本&#xff1a;首先&#xff0c;您需要从CMake官方网站下载最新版本的CMake。他们提供了适用于各种操作系统的安装程序。 卸载旧版本&#xff08;可选&#xff09;&#xff1a;在安装新版本之前&…

使用Gradio搭建聊天UI实现质谱AI智能问答

一、调用智谱 AI API 1、获取api_key 智谱AI开放平台网址&#xff1a; https://open.bigmodel.cn/overview 2、安装库pip install zhipuai 3、执行一下代码&#xff0c;调用质谱api进行问答 from zhipuai import ZhipuAIclient ZhipuAI(api_key"xxxxx") # 填写…

短视频交友系统搭建重点,会用到哪些三方服务?

在搭建短视频交友系统时&#xff0c;为了确保系统的稳定性、安全性和用户体验&#xff0c;通常需要用到多种第三方服务。以下是搭建短视频交友系统时可能用到的关键第三方服务&#xff1a; 云服务提供商&#xff1a;如阿里云、腾讯云等&#xff0c;提供稳定、可扩展的服务器资源…

如何消除SmartScreen“未知发布者”警告?

在互联网高速发展、应用程序遍地开花的当今时代&#xff0c;作为企业&#xff0c;我们通常会开发自己的应用程序来开展自己的业务&#xff0c;以便与客户建立更深入的联系。不少应用程序所有者可能会面临一个难题&#xff0c;那就是用户下载时&#xff0c;系统会弹出SmartScree…