react中useState改变值不渲染怎么解决

最新推荐文章于 2025-08-01 16:26:18 发布
原创 最新推荐文章于 2025-08-01 16:26:18 发布 · 1.2k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#react.js #javascript #前端

在React中，当useState的值为对象时，由于引用不变导致更新不触发重渲染。解决办法是使用ES6的拓展符来创建新对象，如`setArr([...arr])`，这样可以确保每次更新都创建新引用，从而触发组件重新渲染。

react中useState改变值不渲染怎么解决

React中默认浅监听，当State值为对象时，栈中存的是对象的引用（地址），setState改变的是堆中的数据
所以此时 setArr(arr) 后，栈中的地址还是原地址，React浅监听到地址没变，故会认为State并未改变，故没有重渲染页面

解决的办法：
示例如下：

利用ES6的拓展符

const [arr, setArr] = useState([])
setArr([...arr])
【React】useState 的原理
读心悦
06-18 938
useState是 React Hooks 的一部分，允许在函数组件中添加状态。它返回一个包含当前状态和更新状态的函数的数组。状态更新时，React 会重新渲染组件，除非新的状态值与当前状态值完全相同。React 使用 fiber 数据结构来跟踪组件的状态和更新。
深入理解 React 的 useState Hook
百赢出品，必属精品
09-26 684
useStateuseState是 React 中的一个 Hook，主要用于在函数组件中管理状态。导入: 从 React 引入useState。基本用法调用，返回当前状态和更新状态的函数。更新状态使用更新函数来改变状态值异步特性: 状态更新可能是异步的。对象和数组: 更新复杂状态时，需使用展开运算符。延迟初始化: 可以传入函数进行惰性初始化。类型安全: 在 TypeScript 中可指定状态类型。useState使得函数组件能够便捷地管理状态，提升了组件的功能性。
React 源码分析 - setState() 之后没有重新渲染的问题原因与解决方法
互相学习
10-18 4098
问题背景 假设我们正在开发一个让用户填写的表单，比如说登录页面的账号密码表单。 return ( <form> <p>账户:</p> <input type="text" name="firstname"><br> <p>密码</p> <input type="password" n...
React--》React组件变化每次都会导致重新渲染，如何解决？
ztK63LrD的博客
04-20 8441
可以看到初次渲染时，所有的组件都会被执行一次， 当点击按钮时，父组件传递给子组件A的props值发生变化导致A组件又被重新渲染一次，接下来仅仅是父组件发生变化，当父组件的值为4的时候会再次导致子组件A的props值发生变化导致子组件A再次被重新渲染，因为孙组件B没有被传入props，导致其只有在初次渲染的时候被被渲染，后面即使父组件发生变化，其也不会重新渲染，具体的过程如上图所示。React.memo()是一个高阶组件，它接收另一个组件作为参数，并且会返回一个包装过的新组件，包装过的新组件就会。
前端React篇之哪些方法会触发 React 重新渲染？重新渲染 render 会做些什么？
星辰迷上大海的博客
03-08 5619
在React中，组件的重新渲染可以通过setState()、forceUpdate()、props或state的改变、父组件的重新渲染以及context的改变来触发。当组件重新渲染时，React会执行render方法，生成新的虚拟DOM树
React修改状态了但组件不重新渲染的坑
weixin_50887064的博客
03-05 1237
React修改了组件状态但是组件不重新渲染
React 之 state 数据改变页面不更新未重新渲染的 7 种情况 及 解决办法
热门推荐
前端一线搬运工的博客
04-02 6万+
1. 在redux中修改state页面未更新 解决办法: 请检查你的state是不是直接改变原state的, 记住不要直接修改state 原因: reducer 中 state 是引用,在 reducer 中改变 state 是错误的, 虽然 store 里面的 state 是改变了,但是 react - redux 会认为dispatch 前后的 state 没有改变，就不会重新渲染页...
React -- useState状态更新异步特性——导致获取值为旧值的问题
weixin_45705239的博客
07-08 2255
请注意，设置键盘事件监听的 useEffect 中的依赖数组被设置为空（[]），意味着这个 effect 只在组件挂载时添加事件监听器，并且在组件卸载时移除。在 React 的 useEffect 钩子中使用事件处理器时，如果事件处理器引用了组件的状态或属性，并且这些状态或属性在函数定义时的值被固定下来，那么我们就说这个事件处理器是一个闭包，并且它“捕获”了定义它时的环境。当时的场景，主要是为了设置一个esc快捷键，esc快捷键的逻辑功能和按钮为“Done”的时候点击效果是一样的。使用useRef记录值。
点击：简单的React useState钩子示例
02-22
这个“点击：简单的React useState钩子示例”项目正是为了帮助开发者理解如何在函数组件中有效地使用`useState`。 在JavaScript环境中，React组件分为两种类型：类组件和函数组件。类组件通过`this.state`来管理...
14、React 中 useState 钩子的状态初始化与使用
最新发布
p8q9r0的博客
08-01 75
本文详细介绍了 React 中 useState 钩子的使用方法，包括状态的初始化、解构、使用和更新策略，同时结合示例代码讲解了动态值、函数式更新、状态提升等高级用法，并总结了状态管理的最佳实践，帮助开发者高效地进行组件状态管理。
React当中，为什么明明调用了setState()，state也发生了变化，就是没有重新渲染，更新界面？
qq_35175413的博客
06-10 2万+
以前没用过react，改别人的代码，发生了这个问题。原来是原代码中有shouldComponentUpdate(nextProps, nextState)这个方法。这个方法会判断发生什么样的state改变才进行重新渲染。return true的时候重新渲染，false则不变。详情可自行搜索。...
前端 React useState 数组或对象改变后页面没有更新渲染解决
qq_50909707的博客
08-28 1577
【代码】前端 React useState 数组或对象改变后页面没有更新渲染解决。
react-redux 中state数据发生变化，页面并没有渲染
一只路过的小码农
09-19 4506
上一篇文章我们讲了如何在 React项目中添加 react-redux 状态管理 ，遗留一个比较棘手的问题：当我们直接修改state中的数据时，发现数据发生了变化，但是页面并未渲染 代码： let data = { list:[], status:false, } export default function (state = data, action) { switch (act...
React-更新state的数据，dom没有重新渲染
聆听。。花开雨落的博客
12-23 452
state的entourageList数据改变，dom没有重新渲染导致页面显示与state数据不一致。解决办法：加上唯一的key值 如下： {/* 使用唯一的 person.id */}
react hooks钩子时useState更新不渲染组件，更新的数据是对象，怎么解决
weixin_47411869的博客
03-27 3349
使用深拷贝：在更新 state 时，使用深拷贝将旧的 state 值复制给新的 state，这样一来，新的 state 值的地址与旧的 state 不同，就能够触发重新渲染了。在上述代码中，使用 JSON.parse(JSON.stringify()) 方法对旧的 state 进行深拷贝，并修改其 age 属性后作为新的 state 值，从而可以正常触发重新渲染。使用不可变数据类型：使用不可变的数据类型，如字符串、数字和布尔值，而不是引用类型的对象，这样就不会出现值被修改但地址相同的问题。
react 之 state 数据改变页面不更新未重新渲染的几种情况 及 解决办法
weixin_68237499的博客
08-08 2731
组件render渲染了一个对象数组, 当state已确定更新但视图未更新 代码:
React 数据改变后页面没有重新渲染
qq_37086980的博客
06-19 9225
小小的一个前端关注 0.1012021.01.21 11:29:47字数 151阅读 2,864 页面通过render渲染，通过setState改变数据但是页面并未改变。（记录） const obj = this.state.obj; obj.forEach((e) =>{ 改变了对象的值 }); this.setState({ obj }); 此时页面并未改变 解决方法：浅拷贝方式获取对象并修改再赋值。 const obj = [...thi...
React中响应式数据变了界面却未更新（重新渲染） 踩坑！！
a1071626267的博客
11-27 5565
React中响应式数据变了界面却未更新（重新渲染） 踩坑！！
react中setState后页面没有重新渲染
weixin_44487623的博客
03-31 3526
react中的删除效果之后setState 没有渲染 在点击删除后，数据已经被splice了，打印出来也是没有的，但是就是没有重新渲染。 原代码： confirm=(i)=>{ const {linkAddress } = this.state; linkAddress.splice(i,1); this.setState({linkAddress}); } 更改后： confirm...
react 定时器中修改usestate 不进行重新渲染组件
06-01
如果你希望在 React 定时器中修改 useState 而不重新渲染组件，你可以使用 useEffect 钩子函数。在 useEffect 中，你可以设置一个空的依赖项数组，这样 useEffect 只会在组件挂载时运行一次，而不会在 useState 改变...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值