1
votes

ReactJs Obtenir un styleKeeperContext 'd'erreur indéfinie lors de l'utilisation du plugin Radium

J'obtiens l'erreur suivante: "TypeError: Cannot read property 'styleKeeperContext' of undefined", lorsque j'essaye d'ajouter une pseudo-classe de survol à un bouton que je stylise à l'aide du plugin Radium

J'ai essayé d'exclure l'importation de Radium pour voir si la propriété Rootstyle fonctionnerait toujours et c'est le cas.Le problème se produit chaque fois que j'ajoute l'importation de Radium et exporte mon composant d'application encapsulé par la fonction Radium

Je suppose qu'il y a quelque chose que je ne fais pas correctement soit par la façon dont j'utilise la pseudo-classe de survol, soit par autre chose, je ne comprends pas le terme 'styleKeeperContext'

comment puis-je me débarrasser de cette erreur et continuer à utiliser le plugin, tout en gardant les styles adaptés à mon composant

Captures d'écran du code ci-dessous

ma déclaration d'importation ma déclaration d'importation

mes styles définis

mon exportation de composants message d'erreur

reactjs react-native react-router react-redux

0 commentaires

3 Réponses :

1
votes

J'ai rencontré le même problème et il a été résolu après la réduction de la version du module Radium de 0.26.0 à 0.25.2.

1 commentaires

Problème GitHub pertinent: github.com/FormidableLabs/radium/issues/1042

-1
votes

Il suffit de regarder les erreurs de réaction affichées sur votre page Web. Vous trouverez quelque chose comme ceci -

  425 | _this = _possibleConstructorReturn(this, _getPrototypeOf(RadiumEnhancer).apply(this, arguments));
  426 | _this.state = _this.state || {};
> 427 | _this._radiumStyleKeeper = _this.props.styleKeeperContext;
      | ^  428 | _this._radiumMediaQueryListenersByQuery = _this._radiumMediaQueryListenersByQuery;
  429 | _this._radiumMouseUpListener = _this._radiumMouseUpListener;
  430 | _this._radiumIsMounted = true;

Maintenant, suivez ces étapes -

Accédez au fichier node_modules / radium / es / enhancer.js ligne # 427 (selon l'extrait de code ci-dessus, pour vous, il peut être différent)
Commentez cette ligne. (en utilisant // les commentaires de style C)
Quittez le processus npm start (pour vous assurer que nous n'utilisons plus l'ancien fichier / non mis à jour)
Exécutez à nouveau la commande npm start et vous devriez voir que tout fonctionne comme prévu!

Hourra !! nous l'avons résolu.

P.S. Ecrivez ci-dessous dans les commentaires si le problème n'est toujours pas résolu.

1 commentaires

-1 Faire des changements à l'intérieur de modules tiers est généralement un signe que vous êtes trop profondément dans le terrier du lapin. Comme le suggère l'autre réponse, revenir à une version précédente ou attendre une version future qui n'a pas le bogue en question est généralement la voie à suivre. Si vous devez apporter une modification à un module, créer votre propre version au lieu de changer le module intégré permet d'éviter plus facilement de bloquer vos modifications lors de la mise à jour ultérieure des dépendances.

0
votes

J'ai commencé à recevoir cette erreur lorsque j'ai ajouté this.state à un composant:

const MyComponent extends Component {
  constructor(props) { // Add props argument
    super(props); // Pass props to super()
    this.state = { count: 0 };
  }
  // etc.
}

Lors de l'appel du constructeur, j'ai oublié de transmettez les accessoires du composant à super () code> . Une erreur idiote à faire, mais l'erreur Radium a rendu difficile la détermination de la cause première.

La correction de cette façon a résolu l'erreur:

const MyComponent extends Component {
  constructor() {
    super(); // I messed up here
    this.state = { count: 0 };
  }
  // etc.
}

0 commentaires