web-dev-qa-db-fra.com

Impossible d'exécuter «removeChild» sur «Node» avec FontAwesome dans React

J'obtiens l'erreur suivante chaque fois que j'essaie d'utiliser une icône de spinner FontAwesome (avec className='fa-spin') dans React:

Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
at removeChild (http://localhost:5000/public/bundle.js:19553:22)
at unmountHostComponents (http://localhost:5000/public/bundle.js:13683:11)
at commitDeletion (http://localhost:5000/public/bundle.js:13727:5)
at commitAllHostEffects (http://localhost:5000/public/bundle.js:14419:13)
at HTMLUnknownElement.callCallback (http://localhost:5000/public/bundle.js:5035:14)
at Object.invokeGuardedCallbackDev (http://localhost:5000/public/bundle.js:5074:16)
at invokeGuardedCallback (http://localhost:5000/public/bundle.js:4931:27)
at commitRoot (http://localhost:5000/public/bundle.js:14508:9)
at performWorkOnRoot (http://localhost:5000/public/bundle.js:15510:42)
at performWork (http://localhost:5000/public/bundle.js:15460:7)

EDIT: Le problème est survenu plusieurs fois maintenant, et le code lui-même n'a rien de spécial. J'ai utilisé le spinner comme icône de chargement et l'erreur se produit chaque fois que le spinner est remplacé par du contenu. Exemple:

return (
  <div>
    {this.state.loading === true ? <i className="fa-spin fas fa-sync"></i> : (
      this.state.recipes.length === 0 ? (
        <div className='text-center'>
          <h2>There doesn't seem to be anything here...</h2><br />
          <h2 style={buttonStyle}>Get started by </h2><button style={buttonStyle} className='btn btn-md btn-success' onClick={(e) => this.props.setView(e, 'browserecipes')}>browsing existing recipes</button><h2 style={buttonStyle}> or </h2><button style={buttonStyle} className='btn btn-success btn-md' onClick={(e) => this.props.setView(e, 'addrecipe')}>adding a recipe.</button>
        </div>
      ) : (
      <div>
          <h1 className='text-center title'>My Recipe Cloud</h1>
          <RecipeContainer
            recipes={this.state.recipes}
            user={this.state.user}
            tags={this.props.tags}
            setView={this.props.setView}
            changeUser={this.changeUser}
          />
        </div>
      )
    )}
  </div>

)

reactjsfont-awesome
16
David

Je pense que j'ai compris pourquoi cela se produit. Il semble que cela ait à voir avec la façon dont FontAwesome 5 remplace <i> tags avec <svg> Mots clés. Je crois que cela est incompatible avec la façon dont React gère la suppression d'éléments du DOM. Voir: https://fontawesome.com/how-to-use/svg-with-js # with-jquery

La solution de contournement que j'utilise est notée en bas de cette documentation qui doit inclure:

<script>
  FontAwesomeConfig = { autoReplaceSvg: 'nest' }
</script>

Je l'inclus dans mon en-tête, ce qui pourrait être un meilleur emplacement, mais cela semble résoudre le problème pour moi au moins. Cela peut affecter la logique CSS que vous pourriez avoir pour toutes les classes que vous avez dirigées spécifiquement sur les éléments FontAwesome qui sont des enfants directs d'autres classes/identifiants, vous pouvez donc simplement vérifier pour vous assurer que tout votre style est correct, car il est maintenant imbriqué les <svg> tag dans le <i> tag au lieu de le remplacer.

Alternativement, vous pouvez simplement envelopper le <i> Marquez vous vous-même. Par exemple:

{this.state.loading === true ? <div><i className="fa-spin fas fa-sync"></i></div> ...

devrait marcher.

MISE À JOUR (10/10/18): Maintenant, il y a une meilleure explication dans la documentation pour pourquoi cela se produit dans les documents officiels et une explication sur la façon d'intégrer ce FontAwesome avec une bibliothèque javascript ici . La méthode d'imbrication automatique de votre <i> les balises sont maintenant effectuées à l'intérieur de la balise de script pour récupérer la bibliothèque javascript FontAwesome <script src="https://use.fontawesome.com/releases/v5.5.0/js/all.js" data-auto-replace-svg="nest"></script>. Il existe également un support officiel pour la FontAwesome React library qui résout également ce problème.

38
Sir Neuman