React：useState修改状态的规则

已于 2024-07-25 10:28:04 修改
阅读量45 收藏
点赞数 2
文章标签： React
于 2024-07-25 10:27:16 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/panghuangang/article/details/140681326
版权

说明

在React中，状态被认为是只读的，我们应该始终替换它而不是直接修改它，直接修改状态不能引发视图更新。

useState修改状态的规则：状态不可变。所谓不可变，指的是要用新值替换老值，而不能直接修改。

  • 对于简单类型，应该用替换的方式；
  • 对于对象类型的状态变量，也是遵循同样的规则，应该始终传给set方法一个全新的对象来进行修改。

示例

简单数据类型举例：直接修改状态变量的值，视图不会更新

在这里插入图片描述

在这里插入图片描述

点击按钮，count的值会变化，但不会更新到视图：
在这里插入图片描述

代码修改为如下，状态变量的改变就可以更新到视图了：
在这里插入图片描述

修改对象状态

错误的写法：直接修改对象的属性

在这里插入图片描述

只显示了初始值，点击按钮，名字也不会改变：
在这里插入图片描述

正确的写法：传入一个全新的对象用作替换

在这里插入图片描述

开始显示：
在这里插入图片描述

点击按钮以后显示：
在这里插入图片描述

听海边涛声
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
React：React
02-20
在React中，还有许多其他重要的工具和库，如Redux用于集中管理应用状态，React Hooks（如useState、useEffect和useContext等）提供在函数组件中管理状态和副作用的新方式，以及Webpack和Babel用于构建和编译React...
react:ROI课程489的文件-使用React构建Web应用程序
05-24
此外，随着React 16.8的发布，引入了Hooks特性，如`useState`和`useEffect`，它们允许在函数组件中添加状态和副作用管理，极大地简化了代码结构。 Redux是一个常见的状态管理库，常与React结合使用，尤其在大型项目...
【React】useState：状态更新规则详解
最新发布
lph159的博客
07-24 639
在 React 状态管理中，使用 useState 更新对象状态时，推荐使用展开运算符（spread operator）...。展开运算符可以将现有对象的所有属性展开到一个新对象中，确保状态的不可变性。通过这种方式更新状态，React 能够正确检测到状态变化并触发组件重新渲染。本文以一个示例代码详细说明了如何使用展开运算符来更新对象状态，强调了直接修改对象属性不会触发视图更新的错误方法，并介绍了正确的做法，即通过 setState 创建一个新对象来更新状态。这种方法不仅保持了代码的简洁性
React中useState修改状态的规则
Lil_y1的博客
07-24 258
在现今的react中我们修改状态需要借助useState这个函数，但是使用它的时候我们要遵守它的使用规则。
React的状态管理useState
a3337779的博客
04-28 552
useState 是一个 React Hook（函数），它允许我们向组件添加一个状态变量, 从而控制影响组件的渲染结果和普通JS变量不同的是，状态变量一旦发生变化组件的视图UI也会跟着变化（数据驱动视图）useState类似一个java的实体类，实体类通过set方法来改变对象属性值。
P02：useState() 的介绍和多状态声明
wgchen
12-16 2066
React HooksuseState 的介绍多状态声明的注意事项示例ReactHooksDemo\demo01\src\index.jsReactHooksDemo\demo01\src\Example3.jsReactHooksDemo\demo01\src\Example.jsReactHooksDemo\demo01\src\Example2.js useState 的介绍 useState是react自带的一个hook函数，它的作用是用来声明状态变量。 本文从三个方面来看useState的用法，分
React useState() 使用指南
wdquan19851029的专栏
08-04 2976
1.使用 useState() 进行状态管理 useState()是改变状态的开关，将状态添加到函数组件需要4个步骤:启用状态、初始化、读取和更新。 1.1 启用状态 要将<Bulbs> 转换为有状态组件，需要告诉 React：从'react'包中导入useState钩子，然后在组件函数的顶部调用useState()。 import React, { useState } from 'react'; function Bulbs() { ... = useState(...);
React Hook：useState、Context、useRef、useEffect、Context、useMemo
weixin_40455124的博客
04-23 305
useState useState返回一个 state，以及更新 state 的函数。 const [titleProps, resetTitle] = useInput(""); const [colorProps, resetColor] = useInput("#000000"); resetTitile及resetColor就会使用useInput对应值进行更新state 可以对返回state增加Onchange 等html 对象event，如下代码： export const useInpu
React-useState
weixin_46479909的博客
05-29 428
本质：和普通JS变量不同的是，状态变量一旦发生变化组件的视图UI也会跟着变化（useState是一个React Hook（函数），它允许我们向组件添加一个。，从而控制影响组件的渲染结果。
React——hook之useState，useEffect精讲
qq_56989560的博客
06-15 2718
React——hook之useState，useEffect精讲
React系列之useState
总结前端开发中遇到的问题，分享前端知识
06-09 1676
只能出现在函数组件中；不能嵌套在if/for/其它函数中（react按照hooks的调用顺序识别每一个hook）
Web-Development-with-React:使用React进行前端Web开发
04-11
当状态变化时，React会计算出最小的DOM更新，而不是直接修改实际DOM，从而提高了性能。这种策略减少了浏览器的重绘和回流，提升了用户体验。 React Router是React生态系统中的路由库，用于处理应用的导航。它允许...
react-presentation:reactjs-演示文稿
06-15
- **useState**：引入状态变量，允许函数组件拥有自己的状态。 - **useEffect**：用于副作用管理，如数据获取、订阅或手动更改 DOM。 - **useContext**：直接消费上下文，避免深度 prop drilling。 - **...
ReactTest:希望测试一些React的东西
05-14
在ReactTest中，开发者可能通过`useState`或`useReducer` Hook来管理组件的状态，通过props将数据从父组件传递到子组件。 虚拟DOM是React的另一个亮点。React通过创建虚拟DOM树来提高性能，当状态改变时，React会计...
基于Springboot和Vue的数码论坛系统设计与实现-源码 数码论坛系统设计与实现代码（高分毕设）
07-24
数码论坛系统设计与实现-源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！ 系统源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！ 系统源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！
java程序设计—JAVA局域网飞鸽传书软件设计与实现(源代码+论文)43.rar
07-24
java程序设计，可供正在学习的同学研究参考。
年终总结汇报PPT模板(20)三套材料.pptx
07-24
年终总结汇报PPT模板(20)三套材料.pptx
ListView侧边A-Z快速定位导航.zip
07-24
ListView侧边A-Z快速定位导航
react的useState修改数据对数组无效
06-03
在 React 中使用 `useState` 更新数组的时候，也需要使用不可变的方式来更新数组，否则也会出现无法更新的问题。React 的 `useState` hook 返回的是一个数组，第一个元素是当前状态值，第二个元素是更新状态的函数。 下面是一个使用不可变的方式来更新数组的示例： ```jsx const [myArray, setMyArray] = useState([]); const addItem = (newItem) => { setMyArray(prevArray => [...prevArray, newItem]); } ``` 在上面的代码中，我们使用了 `setMyArray` 函数来更新数组，传入的参数是一个函数，该函数接收当前状态值作为参数，并返回一个新的数组。使用 ES6 的扩展运算符 `...` 将原数组中的所有元素展开，再添加新元素，从而创建一个新的数组。这样就能确保 `setMyArray` 更新的是一个新的数组，而不是直接修改原数组，从而避免了更新无效的问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值