Не удалось выполнить "removeChild" на "узле" с помощью FontAwesome в React

Я получаю следующую ошибку всякий раз, когда я пытаюсь использовать значок FontAwesome spinner (с className='fa-spin') в 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: проблема возникла пару раз, и в самом коде нет ничего особенного. Я использую счетчик в качестве значка загрузки, и ошибка возникает всякий раз, когда счетчик заменяется содержимым. Пример:

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>

)

11
font-awesome reactjs

1 ответов

кажется, я понял, почему это происходит. Похоже, это связано с тем, как FontAwesome 5 заменяет <i> теги <svg> теги. Я считаю, что это несовместимо с тем, как React обрабатывает удаление элементов из DOM. смотри:https://fontawesome.com/how-to-use/svg-with-js#with-jquery

обходной путь, который я использую, это отмечено внизу той документации, которая должна включать:

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

Я включаю его в мой заголовок, что может быть лучшим местом для него, но, похоже, это решает проблему для меня, по крайней мере. Это может повлиять на некоторую логику CSS, которую вы можете иметь для любых классов, которые вы направили специально на элементы FontAwesome, которые являются прямыми дочерними элементами других классов / идентификаторов, поэтому вы можете просто проверить, чтобы убедиться, что все ваши стили выглядят правильно, так как теперь они вложены в <svg> в тег <i> тег вместо его замены.

в качестве альтернативы вы можете просто обернуть <i> пометить себе. Например: 

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

должны работать.

30