如何隐藏 componentWillMount 警告

IT技术 javascript reactjs
2021-04-20 20:55:25

我收到了四个无法在我的控制台中最小化的重大警告。这些警告来自我的理解，不是因为我做错了什么，而是因为 react-router-dom 和 react-select 使用了已弃用的 componentWillMount 函数。我如何摆脱警告？

我曾尝试在此站点上查找问题，但最接近我找到的解决方案是https://stackoverflow.com/a/49166225/12057512。由于答案来自一年多前，我想知道是否仍然如此。从那时起，这些大/流行的 npm 包还没有更新吗？

这是我收到的警告之一（其他类似）：

react-dom.development.js:11494 警告：componentWillMount 已重命名，不推荐使用。见 https:// fb 。me/react-async-component-lifecycle-hooks 了解详情。

  • 将有副作用的代码移动到 componentDidMount，并在构造函数中设置初始状态。
  • 将 componentWillMount 重命名为 UNSAFE_componentWillMount 以在非严格模式下抑制此警告。在 React 17.x 中，只有 UNSAFE_ 名称有效。要将所有已弃用的生命周期重命名为其新名称，您可以npx react-codemod rename-unsafe-lifecycles在项目源文件夹中运行。

请更新以下组件：BrowserRouter、Route、Router、Switch

（我实际上尝试运行“npx react-codemod rename-unsafe-lifecycles”，但没有任何区别）

我无法控制这些 npm 包在内部如何工作，所以我发现我经常收到这些我无法修复或删除的警告，这让我很沮丧。

5个回答

解决此问题的常用方法是更新受影响的库（如您所说的 react-router 和 react-select）。如果这些正在维护，那么他们将发布不会产生这些警告的新版本。如果这不是您的选择，那么我不知道，我认为 React 没有抑制特定警告的方法。

请注意，警告仅显示在 React 的开发版本中，它们不会显示在 React 的生产版本中（请参阅文档）。

@Onkeltem 它解决了问题，所以我认为我应该将其标记为正确。但我想你是对的，因为同样的问题也可能由于其他原因而发生。我现在已经取消标记了。
2021-05-27 20:55:25
问题是“如何隐藏......消息”，而不是如何解决原因。所以它并没有真正回答实际问题，因此一定不会被接受。
2021-05-29 20:55:25
太感谢了！我曾多次使用“npm update”，但显然 react-router-dom 没有正确更新。这完全解决了问题。
2021-06-10 20:55:25
最新发布的 react-select 版本显然还没有修复这个问题，但是他们已经在一个未发布的版本中修复了它。所以我想我只需要等待几周，然后这个问题的最后一部分就会得到解决。github.com/JedWatson/react-select/issues/3720
2021-06-17 20:55:25

我发现的最好的..

const warn = console.warn;

function logWarning(...warnings){
  let showWarning = true;
  warnings.forEach(warning => {
    if (warning.includes("UNSAFE_")) showWarning = false;
    else if (warning.includes("SourceMap")) showWarning = false;
    else if (warning.includes("DevTools")) showWarning = false;
  });
  if(showWarning) warn(...warnings);
}


console.warn  = logWarning;
@steinar 它的typescript。应该是Array<['UNSAFE_' | 'SourceMap' | 'DevTools']>大概
2021-06-06 20:55:25
嗨@jeanmgirard。...warnings参数列表后面的冒号不是打字错误吗？或者是我不知道的一些语法？
2021-06-07 20:55:25

使用下面的代码：

console.disableYellowBox = true;
这似乎行不通。另外，我想摆脱这些警告的原因是为了我可以看到相关的警告。您的代码不是禁用所有警告吗？
2021-06-04 20:55:25
这是针对本机的，而不是 reactJS
2021-06-20 20:55:25

Uncaught RangeError: Maximum call stack size exceeded在某些情况下，JeanMGirard 的回答会导致您忘记向useEffectReact Hook 中的依赖项数组添加依赖项。这会使调试代码中的某些错误变得非常困难。

通常，React DevTools 会通过显示警告原因和可能的解决方案来处理这个问题。

这是一个解决方案，可确保 React DevTools 正常处理我们的警告，但隐藏UNSAFE_警告：

const backup = console.warn;

console.warn = function filterWarnings(warning) {
    // If the warning includes any of the following text, let's hide it.
    const supressedWarnings = [
        "Warning: componentWillMount has been renamed, and is not recommended for use.",
        "Warning: componentWillReceiveProps has been renamed, and is not recommended for use.",
        "Warning: componentWillUpdate has been renamed, and is not recommended for use.",
    ];

    if (warning.length && !supressedWarnings.some(entry => warning.includes(entry))) {
        backup.apply(console, arguments);
    }
};

在 index.android.js 中，您可以使用：

  console.disableYellowBox = true
  console.warn = () => {}
其它你可能感兴趣的问题
上一篇如何更改 MUI 输入下划线颜色？ 下一篇React Hooks 渲染两次