更改redux 数据,页面未重新渲染

简介: 更改redux 数据,页面未重新渲染

场景


在reducer中使用 object.assign(state,{data:xxx}) 合并了状态,控制台打印state 数据已更新,但是页面未重新渲染

原因

redux会通过引用来判断前后两次state有没有变化。return原来的state的话redux会认为你的state没有变化。

咱们用Object.assign(state,xx)是直接修改了state对象,然后返回的还是原来的state对象(被修改过的数据)但是引用未更改,还是同一引用源。

解决

使用而扩展符则是创建了一个新的对象,相当于Object.assign({},state,...)

注意:不要在reducer里面做以下操作
1、修改传入参数;
2、执行有副作用的操作,如 API 请求和路由跳转;
3、调用非纯函数,如 Date.now() 或 Math.random()。

相关文章
|
8月前
|
JavaScript
vue数据更新了但是页面不更新的解决方案
vue数据更新了但是页面不更新的解决方案
143 0
uniapp 全局数据(globalData)的设置,获取,更改
uniapp 全局数据(globalData)的设置,获取,更改
2551 0
|
前端开发 CDN
Nuxt.js 分页获取数据(及更新子组件数据、不刷新页面,异步请求追加数据)
Nuxt.js 分页获取数据(及更新子组件数据、不刷新页面,异步请求追加数据)
491 0
|
JavaScript
Vue中v-if失效问题(数据更新,页面没有发生变化)
Vue中v-if失效问题(数据更新,页面没有发生变化)
Vue中v-if失效问题(数据更新,页面没有发生变化)
|
JavaScript
|
3月前
|
JavaScript 索引
Vue中对象或数组数据更新但视图不刷新问题的解决策略
Vue中对象或数组数据更新但视图不刷新问题的解决策略
165 0
|
7月前
|
前端开发
React同一位置的相同组件保留状态
React同一位置的相同组件保留状态
|
6月前
|
JavaScript
vue 数据变化触发页面响应的三种方式(解决:数据变化页面无响应/不刷新的问题)【含原理】
vue 数据变化触发页面响应的三种方式(解决:数据变化页面无响应/不刷新的问题)【含原理】
371 0
|
8月前
|
JavaScript 索引
vue 在什么情况下在数据发生改变的时候不会触发视图更新
vue 在什么情况下在数据发生改变的时候不会触发视图更新
87 2
|
8月前
|
JavaScript 前端开发 API
vue改变数组页面重新渲染的操作/那些操作不会重新渲染页面以及解决方法
vue改变数组页面重新渲染的操作/那些操作不会重新渲染页面以及解决方法
250 2

热门文章

最新文章