react中Object.assign({})中setState不生效的问题

最新推荐文章于 2025-08-29 18:38:35 发布

原创最新推荐文章于 2025-08-29 18:38:35 发布 · 943 阅读

0 ·

CC 4.0 BY-SA版权

js 同时被 2 个专栏收录

23 篇文章

订阅专栏

react

6 篇文章

订阅专栏

本文介绍了一种使用Object.assign方法来更新React组件状态的技巧，通过该方法可以实现在不改变原有对象引用的情况下，更新对象属性，并触发组件重新渲染。

Object.assign({})

cosnt data = Object.assign({}, this.state[status.age], {id: status.key + 1})
this.setState({
[status.age]: data
}, () => {
	this.list(status.age);
})
list = (key) => {
	console.log(this.state[key])
}

注意：[status.age] 这个是一个对象

这样不管字符串还是对象都可以拿到覆盖的信息了

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

惊天bug

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

React常见面试题目9w字|-3setState调用原理，批量更新，setState和replace ,getDefaultProps,props,state,制度的，

VAN

04-22

263

this.props是组件之间沟通的一个接口，原则上来讲，它只能从父组件流向子组件。React具有浓重的函数式编程的思想。提到函数式编程就要提一个概念：纯函数。它有几个特点：●给定相同的输入，总是返回相同的输出。●过程没有副作用。●不依赖外部状态。this.props就是汲取了纯函数的思想。props的不可以变性就保证的相同的输入，页面显示的内容是一样的，并且不会产生副作用。

react自学-2024年10月2日07点50分，setState性能优化相关内容，pureComponent,shoudComponmentUpdate,props,state

VAN

10-04

209

context:非父子组件之间的通信，共享代码，事件总线：Event Bus监听事件触发事件如何去用这个东西呢？拿到创建的eventBuseventBus.emit(出发去一个事件“bannerPrev”，“why’,18,1.88);componentDidMount组件挂载之后监听一些事件componentWillUnmount取消监听//监听事件传入回调函数console.log*(“app当中监听bannerPrev”);}}

参与评论您还未登录，请先登录后发表或查看评论

【react】【错误记录】修改store成功，页面不刷新（原因为Object.assign使用错误）

qq_34838046的博客

10-19

1076

错误现象记录：触发dispatch，store返回值正确，但是页面不变化。 reducers const panelConfig = (state = { type: 0, show: false }, action) => { ... case types.TOGGLE_PANEL: console.log('state:', state); //出错在这里 return Object.assign(state, { show: action.show }

html assign无效,Object.assign的一些用法

weixin_36019543的博客

06-03

574

Object.assign的一些用法2020/11/12 20:19:03　　字体：大中小　浏览 1289　我要评论需要定制网站程序、公众号程序、微信小程序可以联系：565449214或者加微信13961347334(备注：需要技术)或者在处理一些技术问题时，有什么不懂的地方，随时可以加我QQ:565449214讨论技术或者加QQ群62655404讨论用法1：替换数组的值let a = [1,...

React中setState不生效的问题，以及解决方法

热门推荐

小敏哥的专栏

01-12

2万+

setState可以说是React中使用频率最高的一个函数了，我们都知道，React是通过管理状态来实现对组件的管理的，当this.setState()被调用的时候，React会重新调用render方法来重新渲染UI 但实际使用的时候，我们会发现，有时候我们setState之后，并没有立刻生效，例如我们看一下以下的示例代码 class Test extends Component { c...

react的setState中为什么不能用++？

qq_30898861的博客

08-13

1189

在React中，你应该始终使用返回新状态对象的方式来更新状态。这确保了状态更新的不可变性，并且与React的设计理念一致。使用而不是是正确的做法，因为它遵循了状态更新的最佳实践。扩展运算符：用于数组和其他可迭代对象，可以将多个数组合并成一个新数组。：用于对象，可以将多个对象的属性合并到一个新对象中。这两种方法都是JavaScript中非常实用的功能，用于创建新数组或对象，同时保持数据的不可变性。在React中，我们通常使用来创建新的状态对象，而在其他场景下，扩展运算符则用于数组的操作。您提到的。

React中setState是同步还是异步的？

qq_38082146的博客

03-22

450

React setState是同步还是异步的输出结果为: 0,0,2,3 react内部为了优化setState()的批处理，会对setState()进行合并，并且对相同属性的设置只保留最后一次的设置，类似于函数Object.assign()。在 React 的 setState 函数实现中，会根据一个变量 isBatchingUpdates 判断是直接更新 this.state 还是放到一个updateQueue中延时更新，而 isBatchingUpdates 默认是 false，表示 se

React中setState不起作用的情况

Always-Learning

04-21

4759

看下面这个案例不起作用的原因上述案例中的setState函数接收到的对象只是原有state地址的引用和原地址一样，所以不起作用正确的使用方式必须得传入一个新的对象，React经过对比以为发生了变化，才会去渲染，去render ...

【Flutter】 setState方法无效，解决办法

云烟飘渺00博客

11-12

1万+

一、问题描述在Flutter中使用setState赋值无效，没有报错二、解决办法看清楚你写的方法 √ setState的正确写法是 setState((){ .......... }) × 错误写法 setState(){ .......... } 注意自己的写法，IEDA 不报错，这块的问题...

RN使用setState不生效的解决方法---react-native

风雨飘飘飘啊飘的博客

05-09

1840

原因：因为setState是异步的，改变值以后不能立即使用 setState之后，需要走完react-native生命周期，也就是走到render时，state的值才会变成setState设置时的值但是我们在开发过程中会需要setState即时改变值，那么怎么解决呢。方法代码 this.setState({ id: 1 },()=>{ console.log(this.state.id) }) 如上，只需要在setState后面添加一个回调函数即可。若有疑问，可留言！如有帮助

RN使用setState不生效的解决方法

Min_nna的博客

11-14

1194

setState之后，需要走完react-native生命周期，也就是走到render时，state的值才会变成setState设置时的值。但是我们在开发过程中会需要setState即时改变值，那么怎么解决呢。如上，只需要在setState后面添加一个回调函数即可。

react源码阅读:object-assign

bus_lupe的博客

05-12

669

var _assign = require('object-assign'); 对应es6的Object.assign合并两个对象的属性。 /* object-assign (c) Sindre Sorhus @license MIT */ 'use strict'; /* eslint-disable no-unused-vars */ // 获取对象的Symbols属性方法 var get...

React中setState不及时生效的解决方法

m0_57508171的博客

04-30

3571

在你想更新state的地方，加一个setTimeout，setTimeout是同步的，带动state会立即更新，代码如下： setTimeout(() => { this.setState({ phone }) console.log(this.state.phone) }, 100);

Object.assign() 在react redux中的用法

weixin_43416349的博客

06-09

563

Object.assign() 可以用来合并对象。export function NewSetState(currentState, setInfor) {return Object.assign({}, currentState, setInfor)}currentState ： redux 的 statesetInfor ：修改的属性，不过要用 { } 括起来， { 修改的属性：修改 }---------------------- 上面的有点不对 -------------------- 下面的

React中setState修改深层对象： Object.assign / 扩展运算符...

火星男孩的分享空间

07-09

1895

React中setState修改深层对象 Object.assign文档准备工作：测试扩展运算符 testSpread() { let testObj = { 'A': 1, 'B': 2, 'C': 3, }; let data = { ...testObj, 'A': 100, }; console.log('testObj', testObj);//testObj {"A":

解决React Native项目中setState在循环中不生效

F-ZERO-F的博客

02-26

2027

一：问题描述 constructor (props) { super(props) this.state = { dynamicNum: 0 } } componentWillMount () { const data = this.props.data data.allPersonPosts.nodes.map((p, i) => ...

Object.assign的使用

u010663095的专栏

11-26

5231

Object.assign的使用Object.assign方法用于将多个对象的属性复制到一个对象中.语法js Object.assign(target, ...sources) 参数target目标对象, sources和target对象属性进行合并, 复制结束之后, 将结果放到target对象中sources需要复制属性的对象, 可以是多个Return value复制返回结果, 和ta

react中的Object.assign

08-23

在 React 中，Object.assign 是一个用于合并对象的方法。它接收一个目标对象和一个或多个源对象作为参数，并将源对象的属性复制到目标对象中。这样可以创建一个新的对象，其中包含源对象的属性。下面是 Object....