React+antd 通过setState改变数据之后确定数据发生了改变，但是界面没有发生重新渲染

最新推荐文章于 2024-05-09 15:27:46 发布
原创 最新推荐文章于 2024-05-09 15:27:46 发布 · 2.6k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文探讨了在React应用中，如何解决在更新state后页面未重新渲染的问题，重点在于理解forEach与map的区别，并提供了使用map实现数据更新后触发渲染的方法。

React+antd

问题：页面当中通过this.setState 修改state数据之后页面没发生重新渲染

1、首先排查数据是否进行了修改 在render中打印state的数据 发现数据已经发生了变化
2、render 中jsx 判断语法是否进行了限制渲染
3、最后排查到jsx中的遍历使用的是forEach 因为forEach本身遍历只注重过程，遍历完成之后并不会改变原数据，改用map进行遍历之后发现 页面重新进行了渲染

React怎么做数据的检查和变化？
祈澈菇凉
11-13 1367
对于复杂的数据检查和变化逻辑，你可以编写自定义的函数或组件来处理。可以在组件的生命周期方法（如 componentDidMount、componentDidUpdate）或 useEffect 中检查数据的变化并执行相应的逻辑。也可以根据具体的业务需求，编写数据监听器或观察者模式来监听数据的变化。
React+Antd+TypeScript 开发规范
曹焱的博客
09-19 5373
React+Antd+TypeScript 规范整合 1.TypeScript代码标准化规则 提取出部分适用于项目中的官方要求的的TypeScript用于约束贡献者的编码规范 [typescript官方规范] 出自：深圳市伙伴行网络科技有限公司 编辑：前端开发-毛昱宇 (https://zhongsp.gitbooks.io/typescript-handbook/doc/w...
react获取数据后使用setState后页面没有重新渲染的原因及解决办法
吴小迪的博客
06-30 5万+
笔者之前在项目开发的过程中遇到过这种问题，就是当我触发某事件再次获取数据，使用this.setState去更改数据，可是页面没有变化，但是数据确实是已经改了的，笔者特意在this.setState的回调函数里面输出确认了一下。 后来又仔细的看了看，是因为重新获取回来的数据id有重复的，所以react就认为是有问题的，就不会给重新渲染页面，解决办法就是把你要获取的数据的id重新命名一下，或者说过滤数...
Antd Table组件，state改变，但是render并不会重新渲染
最新发布
坚强的泡沫的博客
05-09 1490
Antd Table组件，state改变，但是render并不会重新渲染
记录一次错误使用setState导致页面不会重新渲染
Rascal_II的博客
12-12 1578
记录一次错误使用setState导致页面不会重新渲染
React 之 state 数据改变页面不更新未重新渲染的 7 种情况 及 解决办法
热门推荐
前端一线搬运工的博客
04-02 6万+
1. 在redux中修改state页面未更新 解决办法: 请检查你的state是不是直接改变原state的, 记住不要直接修改state 原因: reducer 中 state 是引用,在 reducer 中改变 state 是错误的, 虽然 store 里面的 state 是改变了,但是 react - redux 会认为dispatch 前后的 state 没有改变，就不会重新渲染页...
umi+react+antd 增删改查
10-20
在实际开发中，我们可以使用React的State和Props来管理数据，当数据发生变化时，通过Umi的API或者React的setState方法来更新状态，触发页面重新渲染。Ant Design的表单组件可以和React的Form控件配合，实现数据的...
React+Antd+Redux实现待办事件的方法
12-11
6. **连接组件与Store**：在React组件中，我们需要通过`store.subscribe`来监听状态的变化，并更新组件的state。此外，我们可以使用`store.getState()`获取当前状态，并在组件渲染时使用。在`componentDidMount`生命...
全栈React+Antd+Egg+MongoDB数据管理系统开发指南
- 状态管理：在React中，组件的状态管理是通过setState方法来实现的，它触发组件的重新渲染。 - Virtual DOM：React内部使用Virtual DOM来进行高效的DOM操作，确保性能。 Ant Design知识点： Ant Design是一套企业...
【React+AntD】生命周期
BMG-Princess
12-17 799
目录 增加getDerivedStateFromProps(props, state)（new） 组件的挂载(Mounting)阶段（old） 组件的挂载(Mounting)阶段（new） 卸载阶段 V16.3之后（V16.4开始） 增加getDerivedStateFromProps(props, state)（new） 在组件创建时和更新时的render方法之前调用，它应该返回一个对象来更新状态，或者返回null来不更新任何内容。 在下列三种情况下，会调用getDerived...
【antd】解决Table组件改变dataSource没有重新渲染问题记录
mytac的博客
06-30 1万+
维护一个state，类型为tree结构，Table组件中dataSource要绑定这个树的cur指针指向的某个节点下的子节点数组。当我准备删除某个节点时，却发现视图上没有变化。我最开始怀疑是react没有检测到state变化，所以没有rerender，自己自制了forceupdate方法，见我另一篇博文：《函数组件强制渲染 模仿forceUpdate》，使用forceUpdate确实能强制令视图更新。且，我在视图层打印dataSource绑定的数据也能发现，确实是更新，数据有变化，但是Table组件就是没有
调用setState後未重新執行 render？
学如逆水行舟，不进则退
08-06 1953
情況一 shouldComponentUpdate（object nextProps，object nextState），每个组件都有这个方法，它负责确定“应该组件更新（运行渲染函数）？”每次更改状态或从父组件传递新的道具时。 您可以为组件编写自己的shouldComponentUpdate方法实现，但默认实现始终返回true —— 意味着始终重新运行render函数。 从官方文档引用ht...
React 数据改变后页面没有重新渲染
qq_37086980的博客
06-19 9230
小小的一个前端关注 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...
PureComponent下setstate不重新渲染
weixin_30662849的博客
09-05 159
https://blog.youkuaiyun.com/zhangheli123456/article/details/85053210 可以将PureComponent 换成React.Component 或者参考链接，深复制赋值 转载于:https://www.cnblogs.com/dianzan/p/11465054.html...
React中useState值为对象时改变值不渲染
qq_52685664的博客
09-03 1679
原因：React中默认浅监听，当State值为对象时，栈中存的是对象的引用（地址），setState改变的是堆中的数据 所以此时setArr(arr)后，栈中的地址还是原地址，React浅监听到地址没变，故会认为State并未改变，故没有重渲染页面 思路：将栈中原arr所指向的地址改变即可 const ceshi = [ { name: '测试数据1', icon: 'jigou', count: 2, color: '#FF9B74' }, { name: '测试数据2', count:..
React当中，为什么明明调用了setState()，state也发生了变化，就是没有重新渲染，更新界面？
qq_35175413的博客
06-10 2万+
以前没用过react，改别人的代码，发生了这个问题。原来是原代码中有shouldComponentUpdate(nextProps, nextState)这个方法。这个方法会判断发生什么样的state改变才进行重新渲染。return true的时候重新渲染，false则不变。详情可自行搜索。...
setState
覃大畅的博客
02-23 796
文章目录setState基础用法setState对组件树的性能影响 ReactNative系列-文章 setState 基础用法 在react组件中，我们使用两种数据来控制一个组件：props和state。props (不了解可以去看 -> props详解) 是组件中的属性，一经指定，那么它在整个组件的生命周期中都不再改变。对于需要改变数据，这时候需要state。 一般来说在construc...
React hooks数据改变后页面没有重新渲染
weixin_46600931的博客
09-01 3622
对象数组是引用方式 ,对于react来说它的值都是地址(涉及到tree diff)，因为没有被重新赋值(地址没有改变)，所以 react 会认为仍然是之前的元素(element)，则不更新视图。解决方案，不能使用浅拷贝直接赋值，而需要使用深拷贝。...
Antd Table新增数据后state数据改变后 组件没有重新渲染
WhiteCover的博客
07-07 6524
onCreate =async (values) => { let newInfo=getInfoData() ck++ newInfo.push({ key:ck, ...values }) setInfoData(newInfo); this.setVisible(false); this.getInfo() }; 本想在本地模拟数据的存取和table的表现, 出了点问题 onCreate方法为提..
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值