React 源代码更改未反映在浏览器 DOM 中

Posted 2023-02-19

【中文标题】React 源代码更改未反映在浏览器 DOM 中

【英文标题】：React Source code changes not reflecting in browser DOM

【发布时间】：2021-09-08 01:22:17

【问题描述】：

我正在使用 Liferay 的反应，这是一个我只在我们托管我们网站的 linux 服务器上观察到的问题，而不是我的本地 tomcat 服务器。 问题在于，在构建 gradle 项目后，所做的每个文件更改/代码更改都会反映在源脚本中。没有反映的是网络浏览器上的新代码。

这里有一些例子可以更好地描述这个问题：

如果我将console.log() 添加到网页的构造函数 - 它不会在控制台上打印相同的内容。 如果我将 <p>TITLE</p> 更改为 <p>TITLE-TITLE</p> - 我会在源代码中看到代码更改，但在浏览器网页上看不到。

我能够得出结论，这与 React JS 有关，因为我的所有其他 Java 和 JSP 页面更改都会得到反映。

这是我的 package.json 文件：

   "dependencies":
      "bootstrap":"^4.5.0",
      "bootstrap4-dialog":"^4.3.4",
      "popper.js":"^1.14.1",
      "create-react-ref":"^0.1.0",
      "datatables.net":"^1.10.20",
      "hashmap":"^2.4.0",
      "jquery":"^3.4.1",
      "react":"15.6.2",
      "react-dom":"15.6.2",
      "react-router-dom":"^4.0.0"
   ,
   "devDependencies":
      "babel-cli":"^6.26.0",
      "babel-preset-env":"^1.7.0",
      "babel-preset-react":"6.24.1",
      "liferay-npm-bundler":"latest"
   ,
   "main":"lib/index.es.js",
   "name":"SearchPageController",
   "scripts":
      "build":"babel --source-maps -d build/resources/main/META-INF/resources src/main/resources/META-INF/resources && liferay-npm-bundler"
   ,
   "version":"1.0.0"

我是 Liferay 的新手，我会做出反应并面临这个问题。任何帮助或支持将不胜感激。

【参考方案1】：

检查是否更改了正确的页面后：

停止服务器 清除浏览器缓存 nmp install npm run dev