更改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()。

相关文章
uniapp 全局数据(globalData)的设置,获取,更改
uniapp 全局数据(globalData)的设置,获取,更改
2340 0
|
JavaScript
|
1月前
|
JavaScript 索引
Vue中对象或数组数据更新但视图不刷新问题的解决策略
Vue中对象或数组数据更新但视图不刷新问题的解决策略
83 0
|
5月前
|
前端开发
React同一位置的相同组件保留状态
React同一位置的相同组件保留状态
|
4月前
vue3 在 watchEffect 里中断未完成的 axios 请求(只保留最后一次请求的方法---连续点击查询按钮的优化)
vue3 在 watchEffect 里中断未完成的 axios 请求(只保留最后一次请求的方法---连续点击查询按钮的优化)
123 0
|
4月前
|
JavaScript
vue 数据变化触发页面响应的三种方式(解决:数据变化页面无响应/不刷新的问题)【含原理】
vue 数据变化触发页面响应的三种方式(解决:数据变化页面无响应/不刷新的问题)【含原理】
317 0
|
6月前
|
JavaScript 索引
vue 在什么情况下在数据发生改变的时候不会触发视图更新
vue 在什么情况下在数据发生改变的时候不会触发视图更新
72 2
|
6月前
|
JavaScript 前端开发 API
vue改变数组页面重新渲染的操作/那些操作不会重新渲染页面以及解决方法
vue改变数组页面重新渲染的操作/那些操作不会重新渲染页面以及解决方法
204 2
|
6月前
|
前端开发 JavaScript 索引
改变数组页面重新渲染的操作/那些操作不会重新渲染页面以及解决方法
改变数组页面重新渲染的操作/那些操作不会重新渲染页面以及解决方法
49 2
|
6月前
|
JavaScript
vue 页面刷新、重置、更新页面所有数据
vue 页面刷新、重置、更新页面所有数据
下一篇
无影云桌面