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

最新推荐文章于 2024-08-17 15:46:50 发布

前端二狗子

最新推荐文章于 2024-08-17 15:46:50 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： react 文章标签： react javascript

本文链接：https://blog.youkuaiyun.com/qq_34838046/article/details/109153507

本文记录了一起在React应用中遇到的问题，即修改store后页面未实时更新。问题根源在于错误地使用了Object.assign，导致state没有被正确地更新。在reducers中，应当避免直接修改state，而应采用新的state对象来替代。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

错误现象记录：触发dispatch，store返回值正确，但是页面不变化。
reducers

const panelConfig = (state = {
   
    type: 0, show: false }, action) => {
   
   
...
    case types.TOGGLE_PANEL

最低0.47元/天解锁文章

200万优质内容无限畅学

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

前端二狗子

关注关注

0
点赞
踩
0

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

React进阶(3)-上手实践Redux-如何改变store中的数据

itclanCoder

11-11

2221

虽互不曾谋面,但希望能和你成为笔尖下的朋友以读书,技术,生活为主,偶尔撒点鸡汤不作,不敷衍,意在真诚吐露,用心分享点击左上方,可关注本刊（祝今日天下有情人终成兄妹)撰文| 川川VX-ID:suibichuanji什么?文章内容不够看,等等..点击文末左下方阅读原文,可看视频学习前言在前面的一文当中,已经知道组件怎么获取store的数据,并渲染到页面上,那么在该节当中揭示怎么更改store的...

React Native中使用mobx

weixin_44114524的博客

08-24

1537

记录mobx的学习使用过程，并记录相关demo开发过程。

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

Redux中store已经修改，但是页面没有重新渲染

weixin_44030736的博客

03-29

3134

在学习Redex做一个删除项目功能的时候，写出来代码之后调试的时候，在触发删除的时候，store虽然改变了，但是页面并没有发生相对应的变化。这里打印出来的内容就是最后返回的state，打印出来的内容是已经改变后的state了，但是页面内容并没有改变。原因 Store 会把两个参数传入 reducer：当前的 state 和 action，所以不能直接修改state，redux会比较新旧...

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

a331790021的博客

11-01

928

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...

vue中 Object.assign 不更新视图

sunlizhen的专栏

07-26

3698

有三种解决方案：方案一：利用Vue.set(object,key,val) 例：Vue.set(vm.obj,'k1','v1') 方案二：利用this.$set(this.obj,key,val) 例：this.$set(this.obj,'k1','v1') 方案三：利用Object.assign({}，this.obj)创建新对象例： 1 ...

react使用redux界面数据不更新的问题(函数组件和类组件对应解决办法)

程序员逍遥的博客

07-15

3516

redux

react中状态更新页面未改变原因

Q_004的博客

08-17

422

使用setState更新使用拓展运算符...,不然数据是原来的地址，不会触发render。

Object.freeze的使用场景有哪些

最新发布

06-12

首先，用户的问题是：“我想了解Object.freeze的使用场景和适用情况请问Object.freeze使用场景及实际应用示例”，翻译成英文是“IwanttoknowtheusecasesandapplicablesituationsofObject.freeze....

react使用CKEditor5，两种使用方式（在线构建器和从源代码构建）。附富文本国际化

weixin_47592804的博客

04-24

2622

react CKEditor5使用配置两种使用方式（在线构建器和从源代码构建）附国际化

关于vue给对象新增属性页面不会动态更新的问题

m0_51328823的博客

02-17

3058

问题不知道大家有没有遇到过这个问题，当我们给data里面声明的对象添加一个新属性，这个新属性是不会动态更新视图的。看一个例子 <template> <div> {{obj}}<br> <button @click="addProperty">动态添加新属性</button> </div> </template> <script> export default { data(){

解决vue刷新页面以后丢失store的数据

godoom的博客

05-11

1万+

刷新页面时vue实例重新加载，store就会被重置，可以把定义刷新前把store存入本地localStorage、sessionStorage、cookie中，localStorage是永久储存，重新打开页面时会读取上一次打开的页面数据，sessionStorage时储存到关闭为止，cookie不适合存大量数据。根据我的需求，最合适的是sessionStorage。 beforeunload在页面...

记录react redux store中item的值改变而页面未渲染的坑

waoecher的博客

11-08

983

我想实现的是一个组件能改变另一个组件button上面的text的功能，查阅了很多资料，决定用redux来实现，因为两个组件并不是父子组件的关系，套用起来会很麻烦。看网上很多人页面渲染不成功是直接在reducer里修改了state的值，从而导致页面未重新渲染，我尝试使用...object后，页面还是没有重新渲染。正确修改后的reducer: const button_text_reducer=(state,action)=>{ switch(action.type){

Vuex 在 store 中更新数组后视图层不更新的问题

thothsun 的博客

02-27

5729

由于 js 的限制，Vue 无法进行监听数组的修改，因此在 Vuex 中，下面三种情况 store 中的数据已经变化了，但视图层不会更新：使用索引更新数组的值时修改数组的长度时直接给对象数组中的对象赋值新属性时解决方式：使用 Vue.set ( target, key, value ) import Vue from 'vue'; export const mutations = {...

vue 值改变后界面没有变_解决vuex改变了state的值,但是页面没有更新的问题

weixin_31174767的博客

01-15

4340

当state里属性定义为obj类型时，有时候出现：在其他页面修改完state值之后，其他页面并没有同步更新。这时候需要转换一下。JSON.parse(JSON.stringify(obj))this.$store.dispatch("setGlobalUserInformation",JSON.parse(JSON.stringify(obj)))补充知识：一个“错误”的vuex写法：vuex刷新...

值改变了,页面没及时更新怎么办

iFfy的博客

11-25

932

$nextTick 解决了vue的缺陷 , 对象的新增属性vue无法响应式的更新，原有属性可正常更新

vuex改变了state的值,但是页面没有更新

a5252145的博客

10-30

1万+

vuex改变了state的值,但是页面没有更新当state里属性定义为obj类型时，有时候出现：在其他页面修改完state值之后，其他页面并没有同步更新。这时候需要转换一下。JSON.parse(JSON.stringify(obj)) this.$store.dispatch("setGlobalUserInformation",JSON.parse(JSON.stringify(obj)...

已解决 TypeError: this.$store.commit is not a function (Vue)

从前端设计到后端实现，从云技术到人工智能，这里分享最新的技术见解和实践经验。一起学习，一起进步！

09-17

1387

嗨，大家好，我是猫头虎博主！今天我要和大家分享一些关于Vue前端开发中遇到的一个令人头疼的Bug：TypeError: this.$store.commit is not a function。在这篇博客中，我将详细解释这个Bug的原因，提供解决方法，并分享如何避免它。让我们一起深入探讨吧！😺在Vue.js前端开发中，出现TypeError: this.storecommitisnotafunction错误可能会令人烦恼。然而，通过正确配置Vuex。

vuex-----Store进行页面数据缓存，页面回退不刷新数据。

小行星住户的博客

07-06

3325

用户在一页表单中点击某列详情或其他操作，跳转入另一页面，在完成操作后返回前一页，期望前一页的表单页数停留在最后操作的那一页，而不是从新以第一页开始，这样会导致用户操作频繁，系统友好度非常低。在以往的项目经验当中，keep-alive是一个很好的处理方式，但是keep-alive本身也存在一些坑，不小心就会给自己挖了慢满满的坑，在最新的项目当中，有使用到vuex进行状态管理，那么我们利用vuex来进行页面缓存也是一种可行的方法。......

React 之 state 数据改变页面不更新未重新渲染的 7 种情况及解决办法