How to hide componentWillMount warnings

问题

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.

回答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).

回答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;

回答3:

Use code below:

console.disableYellowBox = true;

回答4:

In index.android.js, you can use:

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

来源：https://stackoverflow.com/questions/57904356/how-to-hide-componentwillmount-warnings

标签

javascript

reactjs