React / Reactstrap Warning: Legacy context API has been detected within a strict-mode tree

问题

This is brand new install - I have not put any transitions on the Alert component

To replicate the code it is simple

import React from "react";
import { Alert } from "reactstrap";

export const Index = () => {
   return (
      <div>
         <Alert color='primary'>This is a primary alert — check it out!</Alert>
      </div>
   );
};

Error Msg: Please update the following components: Transition

How does one go about updating Transition or eliminating it all together?

回答1:

I have this same warning, and I fixed it changing in the index.js file, the value of <React.StrictMode> to <React.Fragment>. Since this removes the warning, is not guaranteed that your can be bulletproof.

回答2:

In the event that someone comes here on after searching the question and is looking for insight this is it.

React strap (at the time of this post) uses the react-transition-group things fade in and out and menus slide up and down. After amalgamating the info on this subject here and on Github they are currently updating the library. I have finished the coding of that component by ignoring the warning.

It did not impede this iteration of that component. Happy Coding.

回答3:

This issue was reported, and apparently fixed but I received the same error even with the updated source code. It's more than just the error as well - it can cause components to re-render

Here is one github thread from the reactstrap repo about this (but there are a number of them): https://github.com/reactstrap/reactstrap/issues/1340

There are a number of issues related to this warning though.

As best I can tell it has something to do with an item in Transition.js, and I think it may have to do with a this.context call when a component is 'entering'

But, the project I encountered this issue is the first React App I'm building, and I'm not quite ready to learn the Legacy Context API, so that's just my best guess and in the end I just opted for an alternative package.

I don't have the rep to put this in a comment, so the only answers I have are:

Report the issue to the reactstrap team and wait/assist with a fix
Use an alternative package

来源：https://stackoverflow.com/questions/61647771/react-reactstrap-warning-legacy-context-api-has-been-detected-within-a-strict

标签

reactjs

reactstrap

strict