React组件 数组有值setState后发现数据没有更新【排查】

最新推荐文章于 2024-02-25 17:20:44 发布
最新推荐文章于 2024-02-25 17:20:44 发布
阅读量931 收藏
点赞数
分类专栏： react 文章标签： react.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hzxOnlineOk/article/details/124754794
版权

博主遇到了个问题
React组件的PureComponent中，antd的Select组件调用onSelect方法：

this.setState({ selected: [1,2,3] });

但是打印发现没有更新成功

原因是因为生命周期willrecivie又赋值了一次，导致值被覆盖了！！！

hzxOnlineOk
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
用react-redux实现react组件之间数据共享的方法
08-27
React-Redux 实现 React 组件之间数据共享的方法 在 React 应用程序中，实现组件之间的数据共享是一件非常重要的事情。React-Redux 库提供了一种简便的方法来实现组件之间的数据共享。在本文中，我们将介绍如何使用...
react-excel:React组件上传、编辑excel表格数据并将其转换为对象数组
08-04
@ramonak/react-excel React组件上传、编辑excel表格数据并将其转换为对象数组演示安装npm install --save @ramonak/react-excel用法 import { ReactExcel , readFile , generateObjects } from '@ramonak/react-...
react中修改state中的值无效?
最新发布
m0_58575070的博客
02-25 775
问题来了,明明已经修改过了,为什么拿不到值呢,原来是setState的执行机制导致的,setState是作为异步来执行的,打印是同步的,因此拿不到值。解决: 要想获取更新后的值,只需在setState第二个参数中获取即可。
解决关于react antd Form组件不能更新state的问题
qq_45830543的博客
04-25 1386
首先，我先把我的问题说一说。 就是我在引用antd的组件库在写登录注册页面时，用到了
React 列表数组内容更新，但列表不更新，如何解决，问题所在
学习笔记
03-14 3717
React 列表数组内容更新，但列表不更新，如何解决，问题所在 问题描述 在写一个 ReactNative 项目的时候，列表渲染一个对象数组，数组结构如下 const [projList, setProjList] = useState( [ { title: '嵌入式em1000 演示项目 - full', ip: '121.36.2.95/em1000/full/#/' }, {
React使用setState后页面没有更新
qq_64436918的博客
04-15 5392
React使用setState后页面没有更新
react 封装组件的时候，改变数据setState无效
weixin_44076777的博客
10-05 503
setState无效
react hooks钩子时useState更新不渲染组件，更新的数据是对象，怎么解决
weixin_47411869的博客
03-27 2835
使用深拷贝：在更新 state 时，使用深拷贝将旧的 state 值复制给新的 state，这样一来，新的 state 值的地址与旧的 state 不同，就能够触发重新渲染了。在上述代码中，使用 JSON.parse(JSON.stringify()) 方法对旧的 state 进行深拷贝，并修改其 age 属性后作为新的 state 值，从而可以正常触发重新渲染。使用不可变数据类型：使用不可变的数据类型，如字符串、数字和布尔值，而不是引用类型的对象，这样就不会出现值被修改但地址相同的问题。
react 父组件与子组件之间的值传递的方法
08-29
本篇文章主要介绍了react 父组件与子组件之间的值传递的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
react-ReactDatasheet类似Excel的数据网格react组件
08-15
在这个例子中，我们定义了数据数组和事件处理器，然后在App组件中创建了一个ReactDatasheet实例，指定了数据渲染器、编辑器和事件监听器。 总结起来，ReactDatasheet是一个强大的React组件，为开发者提供了构建功能...
React学习之受控组件与数据共享实例分析
10-15
这个组件的state中有一个`name`属性，`input`元素的`value`属性绑定到`state.name`，`onChange`事件则用于监听用户输入，每当输入改变时，通过`updateName`方法更新state，确保组件重新渲染以反映新的输入值。...
react循环遍历useState的数组异步调取接口追加参数后修改原数组处理方案
刻痕
11-19 4995
useState的数组，遍历请求异步接口，追加参数后，更新设置原数组 方案01. 可改造 setArr为function 方案02. 封装使用useState的回调函数 方案03：【推荐】useEffect + es6中的Promise.all()处理（复杂任务也适用） 方案04：useEffect + es5中的回调函数callback处理（逻辑有点绕，因要固定排序） 方案05：useEffect + useState回调函数写法（数据量大的时候需要额外测试处理） . 1.可改造 setArr为funct
在React中，setState更新操作后没有更新state中的数据的问题。为什么setState后，没有更新到state中的值
weixin_46990115的博客
09-17 5529
问题描述：经常会看到这样一个问题，明明已经调用setState的方法了，但是state的值不改变，或者是数据改变了，但是没有重新渲染。找到了几个解决办法，记录一下。思路一、可能是setState(value)中的value值的引用地址与state的一样 就比如最常用遇到的，对象或者数组的更新操作可能失败(最常遇到) 可能是这样的:** […b]这是一个新的数组，然后扩展b数组的元素到新数组，引用地址已经不一样了 所以总结：善用…扩展运算符思路二、可能调用这个set方法的onClick点击事件，被父元素的
react setState不更新的问题
sakura的博客
02-02 2395
react setState不更新的问题
react成长之路:(一): this.setState保存数据后,为啥后面打印发现数据没有变化
lianmindiandi
12-22 1119
由于this.state是异步操作导致的 真实案例 const {count} = this.state this.setState({count:count+1}) console.log(count) //你以为count+1了?那就错了,由于是异步的,在遇到setState后,直接执行下面的,然后再返回执行setState里面的.导致打印出来会有问题 想要达到的案例 const {count} = this.state this.setState({count:count+1},()=&g...
关于react中setState赋值后数据没有及时更新
qinminghao58的博客
11-15 2466
原来的代码是这样的，但是传递出来的之后在父组件内打印发现两个值并没有更新，查阅资料发现需要在setState这个方法内再写一个箭头函数。这次遇到了在一个点击事件中，需要setState赋值后将变量传给父组件。之前使用setState重新赋值后，在render中直接渲染到页面上。这样可以直接在setState重新赋值后就可以立马调用方法.
在react中引用antd表单组件后导致useState钩子函数的数据已更新，但是UI视图却未更新的原因与解决方法。
chenyun___的博客
04-21 72
在react中引用antd表单组件后导致useState钩子函数的数据已更新，但是UI视图却未更新的原因与解决方法。
改变redux里面state，引用了state里面值的组件第一次组件不更新
qq_35716392的博客
11-15 583
A组件改变redux中state的值： handleClick = (e:(React.MouseEvent|HTMLElement))=>{ let width = '0px' , translateXValue = '0px'; if(e instanceof HTMLElement){ width = '88...
react数组变了，但是视图没有更新
Haines
04-12 1372
使用解构赋值就好，浅拷贝 // 添加部门设置 addDuty = () => { console.log(123) const { positionInfos } = this.state if(deptInfos.length >= 10) return message.error('最多只能添加10条！'); const addDutyList = positionInfos.concat([{ dutyId:'', posit
react修改数组里的某一项会更新吗
06-10
React 会根据数据的变化来更新组件。如果你修改数组里的某一项，数组的引用并没有改变，React 可能不会认为这是一个数据变化，因此不会更新组件。要想让 React 更新组件，你需要使用新的数组来替换旧的数组，让 React 感知到数据的变化。可以使用 `Array.prototype.slice()`、`Array.prototype.concat()`、`Array.prototype.filter()`、`Array.prototype.map()` 等方法来创建新的数组。同时，也可以使用 React Hooks 中的 `useState` 来管理数组，直接修改数组中的某一项后，调用 `setState` 更新状态，React 会感知到状态的变化，从而更新组件。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

hzxOnlineOk

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值