react中 Uncaught TypeError: Cannot read property ‘forEach‘ of undefined

最新推荐文章于 2023-03-29 14:26:03 发布

原创

最新推荐文章于 2023-03-29 14:26:03 发布 · 3.1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#react

react 小问题分享
今天项目启动后报错，报错信息如下

react-refresh-runtime.development.js:465 Uncaught TypeError: Cannot read property 'forEach' of undefined
    at Object.injectIntoGlobalHook (react-refresh-runtime.development.js:465)
    at Object

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

莫问红尘事

关注关注

6
点赞
踩
2

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

bootstrap:27 Uncaught TypeError: Cannot read properties of undefined (reading ‘forEach‘) at Obje

郭宝的博客

06-27

896

进入 https://www.crx4chrome.com/crx/277332/ 网站下载插件即可。关闭之前安装的React Developer Tools插件，再次运行React 项目即可。版本可能太低，然后我就换了一个高的版本，就解决了。安装一个高版本的react-主要原因是 react-

Chrome如何安装react-developer-tools插件及解决安装后报出的错误：Uncaught TypeError: Cannot read properties of undefined

念兮为美

07-06

2667

Chrome如何安装react-developer-tools插件及解决安装后报出的错误：Uncaught TypeError: Cannot read properties of undefined (reading 'forEach')——./node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ReactRefreshEntry.js (ReactRefreshEntry.js:17:1)...............

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

使用react-devtools后出现Uncaught TypeError: Cannot read property ‘forEach‘ of undefined的解决方法

Leo_xian的博客

01-20

3486

在开发环境，使用到react-devtools来方便查看react dom，按github上react-devtools项目中下载的v3分支代码，一顿操作后运行项目，发现控制台报了react-refresh-runtime.development.js:465 Uncaught TypeError: Cannot read property 'forEach' of undefined 这看的我一脸懵逼啊，各种在网上找解决方法，然鹅，基本都是v3版本的。经过一番挣扎，终于看到曙光，好家伙，就是版本的问题

react项目启动报错(Uncaught TypeError: Cannot read property ‘forEach‘ of undefined at Object.injectInt)

lanseguhui的博客

11-16

1726

react项目启动时报错如下解决方案：浏览器中关闭react的扩展程序应该是由于react扩展程序版本问题(好像在react项目中可以配置指定版本号) 重新下载https://www.crx4chrome.com/crx/3068/ 下载后直接改为.zip文件，拖到浏览器扩展程序处安装即可 ...

Uncaught TypeError: Cannot read property ‘forEach‘ of undefined

记录日常开发过程中遇到的一些问题

02-13

1969

js报错 Cannot read property 'forEach' of undefined 数组未定义或者不存在，解决方法： if (datas && datas.length) { datas.forEach(function (item, index) { console.log(index); }) } // 或者 if (!datas || !datas.length) return; datas.forEach(function (i

【react】启动新项目时报错:Uncaught TypeError: Cannot read property ’forEach‘of undefined

all_might1的博客

09-10

1373

一、问题描述忙里偷闲，想重开个项目，用作练习项目。但是在 npm i ，启动后，项目没有出现React转圈圈的动画。一开控制台报了如下错误：二、问题解决思路本来想顺藤摸瓜找到这个文件看看那句话是咋回事，但是用vscode打开的工程里全局搜愣是找不到。我自己去node_moudle顺着字母找下去，也毫无收获，没这文件。但是无论我怎么重新启动都报这个错，然后不信邪就去直接找项目文件夹。嘿，很轻松一眼找到了。 ...

react项目启动报错:Uncaught TypeError: Cannot read property ‘forEach‘ of undefined

w_gold_qin的博客

02-19

654

https://blog.csdn.net/feinifi/article/details/112448350 如题，react项目启动报错，具体信息，如下所示：这个问题是因为浏览器安装了react-devtools扩展程序导致的，很多人的解决办法就是直接禁用react-devtools，我觉着也还行吧，但是就是感觉不是很好，我们安装这个玩意不就是为了方便查看react元素与编译之后的代码的么？这种办法似乎有点壮士断腕，我直接不用你了。我个人根据报错堆栈信息，找到node_modules/@pmmmw

react 后台模板启动时报错 TypeError: Cannot read property ‘forEach‘ of undefined

少年的范儿的博客

05-04

882

两种解决方法 1. 根据报错信息，找到 ReactRefreshEntry.js 文件，注释掉第 8 行，重启项目，刷新页面就可以了. 2. 关闭 React Developer Tools 扩展插件，即可（如果未安装，也就不会报错）.

框架报错【injectIntoGlobalHock】TypeError: Cannot read properties of undefined (reading ‘forEach‘)

Aeporn的博客

03-29

293

是因为谷歌浏览器拓展程序里打开了 React Develop Tools。直接关闭拓展程序即可。

react报错：Cannot read property ‘forEach‘ of undefined at Object.injectIntoGlobalHoo

qq_39352780的博客

11-18

1973

react项目启动后控制台报错报错信息：Cannot read property ‘forEach’ of undefined at Object.injectIntoGlobalHoo 解决方法：删掉（不是禁用，是移除或者删除）浏览器里关于react的扩展程序，再刷新页面就可以了。在此记录解决问题的过程，也给小伙伴们一些思路。如有不严谨的地方还请不吝赐教。 ...

Cannot read properties of undefined (reading ‘forEach‘)

前端学习笔记

03-27

1217

执行程序前做校验，或者使用默认值语法。类型，建议检查下代码。

Uncaught TypeError: Cannot read property ‘forEach‘ of undefined React相关报错原因

sjk2054949的博客

10-26

1212

运行React框架时，浏览器报错 Uncaught TypeError: Cannot read property ‘forEach’ of undefined 可能是谷歌浏览器插件开启的原因，如图：关闭该插件，重新刷新页面即可

react 谷歌浏览器报错：Uncaught TypeError: Cannot read properties of undefined (reading ‘forEach‘)

u010234868的专栏

04-24

4657

运行react项目，报错： Uncaught TypeError: Cannot read properties of undefined (reading 'forEach') at Object.injectIntoGlobalHook (react-refresh-runtime.development.js:488) at Object../node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ReactRefreshE

React项目 ReactRefreshEntry.js:8 报错 Cannot read property ‘forEach‘ of undefined

yehao_jq的博客

11-21

945

今天用官方yarn create react-app antd-demo创建新项目的时候出现ReactRefreshEntry.js报错，导致页面一直打不开，错误如下 react-refresh-runtime.development.js:465 Uncaught TypeError: Cannot read property 'forEach' of undefined at Object.injectIntoGlobalHook (react-refresh-runtime.developme

React App 启动报错: Cannot read property ‘forEach‘ of undefined

qq_31688927的博客

08-23

340

安装了react-devtools插件后运行报错解决方法：打开node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ReactRefreshEntry.js文件注释掉代码：RefreshRuntime.injectIntoGlobalHook(safeThis); 解决问题

使用react脚手架搭建的项目，运行时和react-dev-tools工具冲突 Cannot read property ‘forEach‘ of undefined

jiang7701037的博客

11-23

809

使用react脚手架搭建的项目，运行时和react-dev-tools工具冲突，不能运行项目，报如下错： Cannot read property 'forEach' of undefined at Object.injectIntoGlobalHook (react-refresh-runtime.development.js:465) 解决方案： 1、找到这个文件： ../node_modules/@pmmmwh/react-refresh-webpack-plugin/clie...

接入react-redux 之后运行出现错误TypeError: Cannot read property ‘getState‘ of undefined at Provider.js:19

weixin_44514665的博客

02-19

2546

新建的项目中,接入react-redux 之后运行出现错误如下: 错误1: TypeError: Cannot read property 'getState' of undefined at Provider.js:19 错误2: TypeError: Cannot read property 'mount' of undefined at Object.mount (react.ts:214) 原因最后发现是因为粗心,错把 store属性写成了value属性将属性名改为sto

运行React项目出现Uncaught TypeError: Cannot read property ‘forEach‘ of undefined的解决方法

bidang3275的博客

04-24

1969

问题用create-react-app工具生成react项目，运行时报出这个错误，刚开始以为生成项目过程中出现了什么错误，于是重新生成了很多次，一启动项目便报出错误，仔细一看错误偏向于底层代码错误，锁定报错的文件react-refresh-runtime.development.js和ReactRefreshEntry.js。报错原因分析报错原因是React Developer Tools插件版本为3.x版本，版本太老不兼容最新版本的react@17.0.2.而最新的create-react-app

Uncaught TypeError: Cannot read properties of undefined (reading 'deep')

最新发布

03-27

<think>好的，我现在需要解决用户遇到的JavaScript错误：“Uncaught TypeError: Cannot read properties of undefined (reading 'deep')”。首先，我得理解这个错误的原因。根据之前的经验，这类错误通常是因为试图访问一个未定义（undefined）变量的属性。用户提到错误中的属性是'deep'，所以问题可能出现在某个对象没有正确初始化的情况下，被访问了它的'deep'属性。首先，我应该检查用户提供的引用内容。引用[3]指出，这种错误通常是由于未初始化的变量、异步数据问题、属性拼写错误或数组越界。用户的问题可能属于其中一种情况。此外，引用[5]提到，在React项目中，如果给表格传递的dataSource或columns有误，比如多写了一个逗号，也可能导致类似的错误，这说明代码中的语法错误或结构问题也可能引发此类问题。接下来，我需要分步骤思考解决方案： 1. **定位错误发生的位置**：用户需要找到控制台报错的具体位置，查看是哪个文件的哪一行代码导致了问题。例如，如果错误指向一个对象访问'deep'的地方，比如`obj.deep.property`，那么问题可能出在`obj`未定义，或者`obj.deep`本身未定义。 2. **检查变量是否已初始化**：确认访问'deep'属性的对象是否已经被正确初始化。比如，如果代码中有`let data = response.result; console.log(data.deep.value);`，而`response.result`可能为undefined，那么访问`data.deep`就会出错。 3. **处理异步数据的问题**：如果数据是通过异步请求获取的，可能在数据到达之前就尝试访问它。这时候需要使用条件判断，如`if (data && data.deep)`，或者使用可选链操作符`data?.deep?.value`来避免错误。 4. **检查属性拼写和对象结构**：确认'deep'属性是否存在，是否有拼写错误。比如，是否应该是`dep`而不是'deep'，或者是否应该嵌套在其他属性下。 5. **检查数组或对象初始化**：如果涉及数组访问，需确保索引未越界，或者对象已经被正确创建。例如，在引用[4]中，React项目因为数据问题导致`forEach`无法在未定义的变量上调用，类似的情况可能出现在这里，比如某个数组或对象未被正确初始化，导致访问其属性失败。 6. **使用调试工具**：建议用户使用Chrome开发者工具的断点调试功能，逐步执行代码，观察变量的状态，确定在哪一步变量变成了undefined。 7. **检查代码语法**：虽然用户提到vscode没有报错，但引用[5]的例子显示，多余的逗号也可能导致问题。用户需要检查相关代码是否有语法错误，比如对象或数组中多余的逗号，或者括号不匹配等。 8. **更新依赖库或插件**：如果错误是由第三方库引起的，比如Echarts或React插件，可能需要检查版本兼容性或更新到最新版本，如引用[2]和[4]中的问题。综合这些步骤，用户需要系统地排查代码中可能导致对象未定义的地方，特别是在访问'deep'属性之前确保对象及其嵌套属性已经存在。同时，使用现代JavaScript的可选链操作符可以简化代码并减少此类错误的发生。</think>### 解决`Uncaught TypeError: Cannot read properties of undefined (reading 'deep')`的步骤 #### 1. **定位错误源头** - **查看控制台报错**：浏览器开发者工具（F12）的`Console`选项卡会显示错误发生的具体文件和行号。例如： ``` Uncaught TypeError: Cannot read properties of undefined (reading 'deep') at app.js:15:20 ``` 这表示`app.js`第15行的代码尝试访问`undefined`的`deep`属性[^3]。 #### 2. **检查变量初始化** - **确认对象是否已定义**：若代码类似`obj.deep.value`，需确保`obj`和`obj.deep`已初始化。 ```javascript // 错误示例 let data = fetchData(); // 假设返回undefined或未包含deep属性 console.log(data.deep.value); // 报错 // 修复方法：添加空值检查 if (data && data.deep) { console.log(data.deep.value); } ``` #### 3. **处理异步数据问题** - **异步操作需等待完成**：若`deep`属性依赖异步请求结果（如API调用），需确保数据加载完成后再访问。 ```javascript async function loadData() { try { const response = await fetch('api/data'); const result = await response.json(); // 确保result结构正确 if (result?.deep) { console.log(result.deep.value); } } catch (error) { console.error("请求失败:", error); } } ``` #### 4. **使用可选链操作符（Optional Chaining）** - **简化空值判断**：通过`?.`语法避免深层属性访问错误。 ```javascript // 直接访问可能未定义的属性 console.log(data?.deep?.value); // 若data或deep为undefined，返回undefined而非报错 ``` #### 5. **验证对象结构和拼写** - **检查属性命名和层级**：确认`deep`是否为正确属性名，且位于预期对象中。 ```javascript // 示例数据结构 const correctData = { deep: { value: "正确值" } }; // 错误拼写示例 const typoData = { dep: { value: "错误拼写" } }; // 应使用deep而非dep ``` #### 6. **排查代码语法和格式** - **检查逗号、括号等符号**：如引用[5]所述，多余的逗号可能导致数据格式错误。 ```javascript // 错误示例（多了一个逗号） const config = { deep: { value: 1 }, // 此处多了一个逗号 }; ``` #### 7. **调试工具辅助** - **使用断点调试**：在Chrome开发者工具中设置断点，逐步执行代码并观察变量状态。 - 在报错行前设置断点。 - 检查相关变量（如`obj`）的值是否为`undefined`。 #### 8. **依赖库兼容性检查** - **更新第三方库**：若问题与第三方库（如Echarts、React插件）相关，检查版本是否兼容。 ```bash npm update echarts react # 更新库到最新版本 ``` --- ### 示例代码修复假设原始错误代码为： ```javascript function processData(data) { return data.deep.value * 2; } ``` 修复后： ```javascript function processData(data) { return data?.deep?.value ? data.deep.value * 2 : 0; } ``` ---