如何隐藏 componentWillMount 警告

Question

I'm getting four big warnings that can not be minimized in my console. These warnings are from what I understand not because I have done anything wrong, but because react-router-dom and react-select use the deprecated componentWillMount function. How do I get rid of the warnings?

I have tried looking up the problem on this site, but the closest to a solution I have found is https://stackoverflow.com/a/49166225/12057512 . Since the answer is from over a year ago I am wondering if this is still the case. Have these big/popular npm packages still not updated since then?

This is one of the warnings I get (the others are similar):

react-dom.development.js:11494 Warning: componentWillMount has been renamed, and is not recommended for use. See https:// fb . me/react-async-component-lifecycle-hooks for details.

• Move code with side effects to componentDidMount, and set initial state in the constructor.
• Rename componentWillMount to UNSAFE_componentWillMount to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run npx react-codemod rename-unsafe-lifecycles in your project source folder.

Please update the following components: BrowserRouter, Route, Router, Switch

(I actually tried to run "npx react-codemod rename-unsafe-lifecycles" but it made no difference)

I have no control over how these npm packages work internally, so I find it frustrating that I constantly get these warnings that I can not fix or remove.

Answer 1

The common way to fix this would be to update the affected libraries (as you say react-router and react-select). If these are being maintained, then they would release new versions that don't produce these warnings. If that is not an option for you, then I don't know, I don't think React has a way of suppressing specific warnings.

Note that the warnings are only shown in the dev build of React, they won't be shown in the production build of React (see DOCs ).

Answer 2

The best I found..

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;

Answer 3

使用下面的代码：

console.disableYellowBox = true;

Answer 4

JeanMGirard's answer causes Uncaught RangeError: Maximum call stack size exceeded in some instances like when you forget to add dependencies to the dependency array within the useEffect React Hook. This can make it very hard to debug certain bugs in your code.

Normally, React DevTools would handle this by displaying the warning cause and possible solutions.

Here's a solution which ensures React DevTools handles our warnings as normal, but hides the UNSAFE_ warnings:

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);
    }
};

Answer 5

In index.android.js, you can use:

  console.disableYellowBox = true
  console.warn = () => {}