html 难以处理错误:简化React错误#321 - ReactJS

xesrikrc  于 2023-03-06  发布在  React
关注(0)|答案(3)|浏览(163)

我正在构建我的React应用程序,突然收到以下错误:
错误:简化React错误#321;请访问https://reactjs.org/docs/error-decoder.html?invariant=321以获取完整的消息,或者使用non-minified dev environment以获取完整的错误和附加的有用警告。

现在我的应用程序只显示位于App.js中的绿色圆圈按钮,React中构建的网站的其余部分未显示任何内容(白色页面)。
当我尝试上传一些.mp4视频到服务器时,在更新代码后就发生了这种情况。我访问了https://reactjs.org/docs/error-decoder.html/?invariant=321以获得完整的消息细节,并检查了3个可能的原因:
1.您可能有不匹配的React和呈现器版本(例如React DOM)
1.你可能违反了钩子的规则
1.同一应用程序中可能有多个React副本
我验证了这3个原因中的每一个,看起来都很好。

您以前处理过类似的问题吗?您是如何解决的?您知道如何调试错误吗?

我感谢任何帮助,如果你需要更多关于代码或问题的细节,请问。

fiei3ece

fiei3ece1#

经过大量的调试,我发现问题是由mdbreact库的某些函数引起的

// package.json

"dependencies": {
   ...
   "mdbreact": "git+https://oauth2:YOUR_TOKEN@git.mdbootstrap.com/mdb/react/re-pro.git"
   ...
}

我已经得到了专业版的库,默认情况下,它会自动更新。我使用的是4.27.0版本,一切都很好,然后当他们更新到新的5.0.0版本的库和我的应用程序爆炸。这是很难调试,因为只发生在生产方面。
我通过在依赖项末尾添加#4.27.0将库降级到4.27.0版本来解决这个问题

// package.json

"dependencies": {
   ...
   "mdbreact": "git+https://oauth2:YOUR_TOKEN@git.mdbootstrap.com/mdb/react/re-pro.git#4.27.0"
   ...
}

我将保留这个版本直到他们提交修复这些特定的功能。感谢@tmhhao2005谁给了我的研究指南。希望它能帮助其他人与类似的错误!

whlutmcx

whlutmcx2#

问题

问题是您的库正在使用sample-testing,它是以一种非常奇怪的方式构建的,特别是TButton组件,它在模块中包含React v16.8.6,但它使用commonjs样式,如下所示:

module.exports = {}

// React has been included here which is very wrong way
/** @license React v16.8.6
 * react.production.min.js
 *
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */var r=n(4)
// ...

溶液

在编写库来导出React组件的情况下,您只需将它们构建为commonjs样式的单独文件。不要像上面那样包含React,它应该包含在使用您库的父应用程序中。
您构建的组件将大致如下所示:
TButton.js

const TButton = (props) => {
  // ...
}

exports.default = TButton;
vnjpjtjt

vnjpjtjt3#

我也面临着这个问题。这是因为织机扩展而发生的。我禁用了织机,错误消失了。

相关问题