今天react开发遇到个比较恶心的问题

最新推荐文章于 2024-12-05 12:09:56 发布
原创 最新推荐文章于 2024-12-05 12:09:56 发布 · 1k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文记录了一次因在React应用中不当使用State数组而导致的Render阶段错误排查过程。作者详细描述了如何通过逐步注释代码的方式定位到问题根源，并分享了避免类似错误的经验教训。

问题是这样的：一个页面有多个数组，表格、select 生成的option,还有个是state中的数组，在render部分，用了state中数组长度进行判断处理，恶心的问题～～～～
前面的代码都是好的且能正常运行无意中用到了state的数组，然而这个数组在state中不存在，因为所在位置是render中比较靠后，这就出现了问题，它妈的竟然在render前部分报错，前两个都没问题报错，有问题的在后面不报错，我也是吐了，找了好久，把代码一块一块注释掉，瞅了半天才发现，以后注意。被坑怕了

吐槽下：~~~~~~~~今天又遇到，出了警告，尽量从报警告的位置往下找 2018.3.28

React开发中常见问题及解决方案
大道至简
12-28 1688
组件状态更新不一致 问题: 在 React 组件中，如果你不正确地处理状态更新，可能会导致应用的 UI 不一致。 解决方案: 确保使用 setState 方法更新状态，并且理解它是异步的。如果新的状态依赖于旧的状态，应该使用 setState 的函数形式。
详解React项目中碰到的IE问题
12-12
最近接手一个React项目，在IE下碰到了俩问题 IE11报错如下： 跟踪一下之后，发现是一些其他的npm包里面用到了startsWith这个方法，可以自己polyfill一下： if (!String.prototype.startsWith) { String.prototype.startsWith = function (search, pos) { return this.substr(!pos || pos < 0 ? 0 : +pos, search.length) === search } } 不过加prototype的方法毕竟不好，可以通过引入@babel/pol
react-native遇到的坑，及解决方法
热门推荐
u010500895的专栏
06-13 1万+
在react-native 0.26.0 版本 1. 引入头文件 var  类名 ＝ './类名' 会报Super expression must either be null or a function, not undefined  解决方法 export const 类名 ＝ './类名'; 2. 添加tabBar 时添加 selected = { this.state.sel
react项目遇到问题
u012841667的专栏
06-12 1299
history问题 var React = require('react'); var ReactDOM = require('react-dom'); var {Route, Router, IndexRoute, hashHistory} = require('react-router'); var Main = require('Main'); ReactDOM.render( <Rout
React项目遇到的问题
ch_Jianghaolin的博客
09-28 253
Reactjs 踩坑 一、Antd 遇到的问题 1、版本antd 3.x <Input /> <FormItem> {getFieldDecorator('verifyCode')( <Input maxLength={4} style={{ border:'none !important' }}
React 项目遇到的问题
qq_34297848的博客
08-01 761
1、用npm 装插件 ，安装成功后，项目运行报错 原因：npm 安装东西时 会漏装一些东西，所以运行会报错 解决办法: 把项目中的 node_modules 文件删除，重新 npm i 装一下。 2、npm 安装 库 报错 在Powershell 窗口中安装报错， 解决办法：在 git bash here 窗口 安装。 这时有人会为什么？其实我也不是特别理解，大概意思就是 环境变量的原...
开发中遇到的react问题记录
菌哥记录
04-28 861
在用react开发的时候遇到了一个问题：在实现react父子组件通信时，我在父组件A中调用了子组件B，并向子组件B传入父组件A的方法和state里的2个变量。在子组件B中接收到父组件A传入的note和beats变量后，存入子组件的state中，子组件通过调用父组件的方法改变父组件的state值，使得父组件render重新渲染。本来以为父组件重新渲染连带子组件重新渲染时，子组件中存储的state值也...
react项目开发过程中遇到的问题
liuye066的专栏
08-08 598
react项目开发过程中遇到的问题
React三大难点一次说清：fiber、hook、任务调度和算法
趣谈前端
09-13 1001
国内的前端领域，Vue 和 React 是最火的两个框架，要说岗位数量，Vue可能会更多一点。但如果把公司范围缩小到互联网大厂，或者把范围扩展到全球，那React无疑独占鳌头。↑上图来自《...
react项目搭建遇到的问题
couch potato的博客
04-21 281
1、npx create-react-app 项目名， 搭建项目没有src 原因：create-react-app脚手架版本过低 解决： 先卸载下：npm uninstall -g create-react-app 再重新安装：npm install -g create-react-app 接着运行：create-react-app 项目名 然后进入文件夹：cd 文件夹，npm start 就...
react项目中遇到的几个问题(二)
weixin_44258574的博客
08-08 1902
react+typescript项目中遇到的几个问题整理
React常见问题解决
01-08
React常见问题解决 本文是基于Windows 10系统环境，学习和使用React： Windows 10 一、react常见问题解决方案 (1) 拼接字符串（常量+变量） const variable = 'department' const param1 = 'inspur' const param2 = 'chaoyue' ${param1}--${param2} //inspur--chaoyue {getFieldDecorator('senderInfo', { initialValue: `${sender}--${time}` }
vue-react-h5实战遇到的问题.docx
04-17
在实际开发的vue - react - h5的项目时，遇到的问题以及解决方案，和我个人对前端框架的对比
react项目中遇到的一些问题
weixin_30528371的博客
08-24 395
推荐使用facebook官方构建工具create-react-app来创建React基础工程。（然而我还是手动构建） （路由）官方旧版本和V4的比较。https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/guides/migrating.md 欢迎补充！ 正文：（r...
React相关问题
Qimingweikun的博客
09-21 358
React相关问题 同一组件下不同参数之间的跳转不刷新 componentWillReceiveProps(nextProps) { // ... console.log(nextProps.match.params.id); }
react项目开发问题整理
小白目的博客
03-04 1472
1. react中路由跳转后页面不置顶问题：从页面A跳转到页面B，页面A滚动到中间位置，跳转后页面B也会在中间位置 解决：在顶部组件的生命周期中进行判断，例如 componentWillReceiveProps(nextProps){ 　　//当路由切换到新页面时置顶 　　if(this.props.location !== nextProps.location){ 　　　　window.scrollTo(0,0)}} 2. 数组map遍历提示需要加key 但不要直接给 index, 因为如果增加或者删除
【亲测免费】 「React技术揭秘」项目常见问题解决方案
最新发布
gitblog_00574的博客
12-05 766
「React技术揭秘」是一个专注于React源码分析的开源项目，旨在帮助开发者深入理解React的工作原理和内部机制。该项目通过自顶向下的方式，详细解析React的核心概念和技术细节，适合有一定React基础的开发者阅读和学习。 项目主要使用的编程语言是JavaScript，同时也涉及到一些Shell脚本用于项目的构建和部署。 ## 新手使用注意事项及解决方案 ### 1. 环境配置问题 ...
React 问题汇总
sugang666的博客
08-30 571
1.Mobx 数据更新后 ant Design Tabel dataSource 数据不同步更新 2.onchang 调用必须 加bind(this)绑定作用域 3.this.setState后立即调用this.state是获取不到最新的数据 解决方法:   1&gt;将this.setState放入setTimeout函数中    2&gt;componentDidUpdate(); ...
React Native Expo开发常见问题与解决策略
处理权限请求时可能会遇到问题，包括权限被拒绝或请求流程异常。 7. **原生模块集成问题**: 虽然Expo极大地简化了与原生模块交互的过程，但集成复杂的原生代码库时，可能会遇到模块冲突、无法找到模块等难题。 ###...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值