警告：React 检测遇到错误：错误：找不到光纤“SvgCheck”的 ID

Question

我有一个状态，根据它是真还是假，我会显示不同的 svg 图标，尽管我注意到状态之间的切换导致出现此错误：警告：反应检测遇到错误：错误：找不到光纤“SvgCheck”的 ID ，我在 public/static/icons 中有我的图标，所有 svg 文件都在这里，然后我有 index.js，我在其中导入这些图标，然后像这样导出

import Check from './check.svg'
export {
...
Check,
}

然后我将它们导入为：

import {Check} from "public/static/icons"

我用它们作为 <Check/>

为了让我像这样使用它，我在 next.config.js 中使用了 svgr 插件，我有：

module.exports = {
    webpack(config) {
      config.module.rules.push({
        test: /\.svg$/,
        use: ["@svgr/webpack"]
      });
  
      return config;
    }
  };

我最近才开始收到这个警告，以前从未见过。

Answer 1

大家好，我是 React DevTools 的作者和维护者。

您询问的错误与 React DevTools 和 React Refresh 之间的交互有关。

这些错误已经存在一段时间了，但最近由于有意更改了较早的表面错误（21426）而变得更加明显，因此错误报告将包含原始错误而不是下游错误（后者更难以归因和修复）。

在过去一两周（21536、21516、21523）中，我一直在修复 DevTools+Refresh 的实例，但我还没有全部搞定。对不起。

如果您有办法重现您所看到的错误，请在 GitHub 上告诉我（包含代码和说明），以便我为您修复它。对于这种事情，我并没有真正检查 Stack Overflow。