react mobx 数据更新小坑记录

最新推荐文章于 2025-05-31 20:23:59 发布
原创 最新推荐文章于 2025-05-31 20:23:59 发布 · 1.4k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#react

本文记录了从Vue的this.$set切换到React时遇到的数据更新问题。初试者可能误用直接赋值的方式更新状态，导致异步获取的数据无法渲染。文章强调React需要通过返回新数组或对象来触发页面重新渲染，避免数据更新不被检测的问题。

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

react 数据更新小坑记录

实例
一开始使用图片中注释的写法，页面中渲染的数据是异步获取之前的数据，注释中的写法是从vue项目vuex复制过来的，vue项目中使用的是this.$set赋值，到了react中以为改为直接赋值就好了，结果是异步获取的数据无法渲染，后改为map，返回一个新数组才会重新渲染页面，react要改变对象才会渲染，检测不到对象中的数据变化，特此记录。

csdnnname
关注
前端面试汇总-React
构建数字世界的感官之桥 | 分享前端工程化、动效魔法与性能之舞！
06-29 1374
React并不是将click事件绑定到了div的真实DOM上，而是在document处监听了所有的事件，当事件发生并且冒泡到document处的时候，React将事件内容封装并交由真正的处理函数运行。这样的方式不仅仅减少了内存的消耗，还能在组件挂在销毁时统一订阅和移除事件。除此之外，冒泡到document上的事件也不是原生的浏览器事件，而是由react自己实现的合成事件（SyntheticEvent）。因此如果不想要是事件冒泡的话应该调用event.preventDefault()方法，而不是调用event
mobx使用跳坑
weixin_33810302的博客
08-21 643
2019独角兽企业重金招聘Python工程师标准>>> ...
React使用Mobx管理数据
weixin_30314813的博客
01-29 378
React 和 Vue一样都属于单向数据流，为了更好的进行状态和数据管理官方和第三方也有配套的Redux等插件，本文介绍一个个人觉得更易用使用的组件 Mobx 核心概念 MobX 处理你的应用程序状态如下图所示 常用的几个装饰器 （装饰器解释) Actions: 改变state的操作。 ObservableState:应用的可被观察的数据状态。 Computed: 从state中通过纯函数的操...
mobx数据变了,视图没变,mobx6的用法
天渺(喵)工作室
06-27 956
在react中使用react-mobx的情况下,数据已经被action 改变了,但是视图层 没有随之概念 如果mobx的版本大于6 "mobx": "^6.3.2", "mobx-react": "^7.2.0", 切记添加 makeObservable 初始化项目 import { observable, action, computed, makeObservable } from "mobx"; export class AuthStore { @observable.
react应用中mobx未检测到数组的更新
qq_38606793的博客
03-01 3440
title: react应用中mobx未检测到数组的更新 cover: /img/5.jpg 在mobx中定义一个可观察的数组 class Store{ @observable testArray = []; } 在组件里面引用这个store testArray.map(item=>( <span>{item}</span> )) 这个打印这个t...
mobx数据更新，组件未刷新问题（含处理方案）
晴天有何特别
10-17 7461
在这里我不得不吐槽一下我遇到的这个问题 我上一个测试项目使用mobx完全没问题，结果我正式项目一上mobx，出毛病了，代码流程都是一样，但他操作成功，数据更新，就是不刷新组件我真是服气了，网上找了好久都没找到有用的文章，我真的自闭了，但是mobx也不能放弃，我硬着头皮看啊，搜索文章，看api，完全摸不着头脑，最后我想到一个点，我去看了一下mobx版本,发现问题 这是不能正常使用的情况,版本6.0了我第一次使用这玩意儿哪知道啊， "mobx": "^6.0.1", "mobx-react
谈谈React的全局状态管理Redux和Mobx的使用
wang839305939的博客
03-01 5018
目前有很多基于flow理念的状态管理器，Redux和Mobx是目前追随度比较高的两种，那么选择Redux还是Mobx呢？
微信小程序Taro + React开发实践
gsnmtorrent的博客
04-23 8330
微信小程序Taro + React开发实践 微信小程序原生开发有一套自己的规范和写法，开发体验十分类似Vue，但如果你想减少学习成本，那么Taro框架是一个在此基础上又封装了一层的轮子，从社区热度到开发体验上都十分优秀，支持React/Vue等框架来开发微信/支付宝等小程序，非常值得一试。 初始化 安装@tarojs/cli $ npm install -g @tarojs/cli $ yarn global add @tarojs/cli $ cnpm install -g @tarojs/cli
react常见面试题(持续更新)
Mr.Wang开发日常
03-06 1338
受控组件的值是由React组件自身的state所控制的。这意味着表单元素的值不是直接由DOM维护，而是通过React组件的state来决定。每次用户输入时，都会触发一个事件处理器（如。
【高频考点精讲】前端数据流管理：Redux和MobX的适用场景
最新发布
全栈老李的博客
05-31 1038
Redux和MobX没有绝对优劣，就像螺丝刀和扳手——修自行车用螺丝刀方便，拧水管就得用扳手。全栈老李的建议是：小项目先用React自带的状态管理，真Hold不住了再考虑上这些工具。下期想听什么话题？别忘了关注"全栈老李"获取更多干货～
react native使用mobx，以及list的更新问题
weixin_52143507的博客
04-28 479
很多使用RN里需要使用mobx来做全局状态管理，一般变量的更新比较好做，比如string，number类型，但是涉及到list，有时候更新后其他observer并不会实时刷新。 究其原因，可以参考这个https://github.com/mobxjs/mobx/issues/476#issuecomment-250969418 代码如下： 注意dataSource的部分，list使用的部分也要用dataSource，不要直接用privateList。 import { observable, co
mobx中跟新了数据视图没变化_【第1781期】MobX 简明教程
weixin_39835178的博客
11-21 701
前言SEEConf，2020年1月4号杭州见，C位抢票见文章末尾。今日早读文章由腾讯@whinc投稿分享。正文从这开始～～导读：MobX 是一个优秀的响应式状态管理库，在流行的状态管理库 Redux 之外为我们提供了其他选择。如果你还没有尝试过 MobX，我强烈建议你继续阅读本文，并跟着示例动手实践体验一下。本文是 MobX 的入门教程，文章包含 MobX 的设计哲学、状态派生模型、核心...
mobx中跟新了数据视图没变化_VUE 2.X - 变化侦测理解与实现
weixin_39604045的博客
11-21 281
最近因为赶新项目，好久没跟新文章，请原谅，已经预备了很多主题，请期待~今天的主题会围绕Vue的变化侦测展开探讨，会先简单的介绍MVVM的原理和实现一个基于“推”的变化侦测。Agenda如下， MVVM，会简单的介绍下MVVM的原理，接着会针对以下两点进行着重探讨，（1） 数据的双向绑定（2） 变化侦测的两种类型，即“推PUSH”和“拉PULL”。2. Reactive - Object / ...
mobx系列(五)-Mobx常见问题及解决方案（2）observable state更新后组件不主动更新问题
热门推荐
smk108的博客
04-29 1万+
在《mobx系列(二)-mobx主要概念》中解释过mobx对什么作出反应，如果对这一部分内容理解不清楚，开发中经常会遇到store中状态更新了，但是组件没有重新渲染的问题。本文简单列举几种情况及解决方法。 1、缓存observables 属性并存储在本地 这是文档中的一个示例，指的是从 observable 属性中提取数据并存储，这样的数据是不会被追踪的： class User { @...
react 遇到的问题1 ——（ 数据更新视图没更新）已解决
gu644335363的博客
04-22 3772
使用react开发项目时，使用useState 定义数据，通过定义的set方法修改数据，视图没有更新。
mobx中observable数据更新，响应式组件未更新
adam_De的博客
08-13 1567
mobx中observable数据更新，响应式组件未更新 先上代码，说明问题： store： @observable toDoLists = [] @computed get toDos() { const [ALL, DONE, UNDONE] = this.filterTypes; switch (this.filterType) { case DONE: return this.toDoLists.filter(item => !!item.don
mobx6，state更新后。react试图没有更新
wq123123423432的博客
10-04 340
mobx最新版本，state更新后不会自动刷新react试图，需要在state中添加 makeObservable class State{ constructor() { makeObservable(this); } }
mobx 如何删除/替换数组元素
Neo Xiao的博客
12-20 1248
直接类成员变量 export default class XxxStore { //这种方式定义的数组 也会是一个可观察对象， //但是和使用@observable/observable()修饰的有区别 xInfoList = []; @action delInfo = (info) => { //返回id不为为info.id的数据 this.xInfoList = this.xInfoList.filter(item => item.id !== info.id); .
mobx中的“数组”由监听者格式转变成真正的数组
supercolorpower的博客
11-01 2552
store 中的数组.slice()
使用react开发语言基于next.js脚手架的后台管理系统最佳实践
03-08
<think>嗯，用户想了解基于Next.js和React开发后台管理系统的最佳实践。首先，我得考虑用户可能的背景，可能是前端开发者，有一定React基础，但可能对Next.js不太熟悉，或者想优化现有项目。后台管理系统通常需要路由、权限、状态管理、UI组件、API集成等，所以需要覆盖这些方面。 首先，Next.js的优势在哪里？服务端渲染、静态生成、API路由这些功能对后台系统有帮助。比如权限管理和SEO可能不重要，但服务端渲染可以提高首屏加载速度，这对后台管理也是有好处的。用户可能关心项目结构怎么组织，怎么利用Next.js的特性。 然后是技术选型，状态管理用Redux还是MobX？可能Redux更普遍，但Zustand更轻量。UI库的话，Ant Design或者Material-UI都是不错的选择，但Ant Design更适合后台系统，组件更全面。数据请求用axios比较常见，但也可以提到React Query或者SWR来优化请求。 权限管理是关键，需要路由守卫，Next.js的中间件可能在这里派上用场。动态菜单和按钮级权限怎么处理？可能需要后端返回权限数据，前端动态生成路由和菜单。JWT和状态保持也需要考虑，比如使用cookie或者localStorage。 项目结构方面，Next.js有app目录和pages目录，用户可能不知道如何组织。按功能模块划分可能更好，比如每个模块有自己的页面、组件和API。公共组件和Hooks的提取也是最佳实践的一部分。 性能优化方面，静态生成可能不太适用动态内容的后台，但代码分割、懒加载组件、图片优化可以提升性能。按需加载UI库的组件减少包大小，这点很重要。 错误处理和日志监控，用户可能容易忽略，但实际项目必须考虑。全局错误边界和API错误处理中间件能提升用户体验。日志服务集成比如Sentry或ELK栈可能需要提及。 部署和持续集成，用户可能关心怎么部署到Vercel或者其他平台，环境变量的配置，CI/CD流程怎么设置，自动化测试怎么集成。 典型实现步骤需要分点清晰，从初始化项目到测试部署，每一步的关键点要说明。比如权限模块如何实现，API如何封装，状态管理怎么整合。 常见问题比如路由缓存、首屏加载优化、权限同步，这些都是开发中容易遇到的坑，需要给出解决方案。 最后，资源和案例推荐帮助用户进一步学习，比如官方文档、开源项目，让用户有参考的例子。 需要确保回答结构清晰，覆盖所有关键点，同时语言简洁，避免技术术语过多，但又要准确。可能需要检查是否有遗漏的部分，比如身份验证的具体实现，或API安全措施，不过用户的问题是最佳实践，可能不需要太深入细节。还要注意使用中文，LaTeX格式的正确应用，不过这个问题可能用不上数学公式，主要关注代码块和结构。</think>以下基于Next.js + React开发后台管理系统的最佳实践方案，采用分层结构说明关键要点： ```markdown # Next.js后台管理系统最佳实践 ## 一、技术选型组合 $$ \text{Next.js(14+)} + \text{React(18+)} + \text{TypeScript} + \text{Zustand} + \text{Ant Design} + \text{React Query} $$ ## 二、核心实现方案 ### 1. 项目结构规范 ``` /src ├── app # App路由目录 │ ├── (admin) # 权限路由组 │ ├── api # API路由 ├── components # 公共组件 │ ├── layout # 全局布局 │ └── auth # 权限组件 ├── lib # 工具库 │ ├── api # 请求封装 │ └── constants # 常量定义 ├── stores # Zustand状态库 └── styles # 全局样式 ``` ### 2. 权限控制实现 ```tsx // 中间件方案 export function middleware(request: NextRequest) { const token = request.cookies.get('token')?.value if (!token && !request.nextUrl.pathname.startsWith('/login')) { return NextResponse.redirect(new URL('/login', request.url)) } } // 组件级控制 const AuthWrapper = ({ children, requiredPermissions }) => { const { permissions } = useAuthStore() return hasPermission(permissions, requiredPermissions) ? children : <Redirect to="/403" /> } ``` ### 3. API层优化 ```ts // 基于axios的封装 const api = axios.create({ baseURL: process.env.NEXT_PUBLIC_API_URL, timeout: 10000 }) // 响应拦截器 api.interceptors.response.use( response => response.data, error => { if (error.response?.status === 401) { redirectToLogin() } return Promise.reject(error) } ) ``` ## 三、性能优化策略 1. 动态加载策略 ```tsx const Editor = dynamic(() => import('@/components/Editor'), { ssr: false, loading: () => <Skeleton /> }) ``` 2. 静态资源优化 ```js // next.config.js module.exports = { images: { formats: ['image/avif', 'image/webp'], remotePatterns: [{ protocol: 'https', hostname: 'assets.example.com' }] } } ``` ## 四、典型扩展方案 1. **多主题支持**：通过CSS变量+Context实现 2. **国际化方案**：整合next-i18next实现 3. **错误监控**：接入Sentry+错误边界 4. **自动化测试**：Jest + Testing Library组合 ## 五、部署实践 1. 环境变量管理 ```bash # .env.local NEXT_PUBLIC_API_URL=https://api.example.com AUTH_SECRET=your_secret_key ``` 2. CI/CD配置示例(GitHub Actions) ```yaml name: Deploy on: [push] jobs: build: runs-on: ubuntu-latest steps: - uses: actions/checkout@v3 - uses: pnpm/action-setup@v2 - uses: actions/setup-node@v3 - run: pnpm install - run: pnpm build - uses: amondnet/vercel-action@v3 with: vercel-token: ${{ secrets.VERCEL_TOKEN }} ``` ## 六、推荐技术栈组合 | 分类 | 推荐方案 | 替代方案 | |--------------|-------------------------|---------------------| | 状态管理 | Zustand | Jotai/Redux Toolkit | | 请求库 | React Query + Axios | SWR + Fetch | | UI组件库 | Ant Design | MUI/Chakra UI | | 表单管理 | React Hook Form | Formik | | 可视化 | ECharts/Recharts | D3 | **扩展建议**： 1. 使用Next.js的App Router实现嵌套布局 2. 通过Server Actions处理表单提交 3. 使用TurboRepo管理多包仓库 4. 集成Storybook构建组件文档系统 ``` 建议参考实际项目案例： - [Next.js Admin Starter](https://github.com/vercel/examples/tree/main/storage)（官方示例） - [Ant Design Pro](https://pro.ant.design/)（企业级方案） - [Shadcn UI Admin](https://ui.shadcn.com/)（现代UI实践） 注意：具体实现需根据业务需求调整，建议优先遵循Next.js官方推荐模式，逐步引入复杂功能。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值