Reactjs 未能执行'；removeChild'；在'；节点'；以惊人的速度反应

每当我尝试在React中使用一个旋转器图标（带有

className='fa-spin'

）时，就会出现以下错误：

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)

编辑：这个问题已经出现了好几次，代码本身也没有什么特别之处。我一直使用微调器作为加载图标，每当微调器被内容替换时，就会发生错误。例如：

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>

返回(
{this.state.loading==true？：(
this.state.recipes.length==0(
这里似乎什么都没有……

从this.props.setView（e'browserecipes'）}>浏览现有配方或this.props.setView（e'addrecipe'）}>添加配方开始。
) : (
我的食谱云
)
)}

---

)

我想我明白了为什么会发生这种情况。这似乎与Fontsome5将

标记替换为

标记的方式有关。我认为这与React处理从DOM中删除元素的方式不兼容。见：

我使用的解决方法是该文档，其中包括：

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

FontAwesomeConfig={autoReplaceSvg:'nest'}

我把它包括在我的标题中，这可能是一个更好的位置，但它似乎至少解决了我的问题。它可能会影响任何类的CSS逻辑，这些类专门针对其他类/ID的直接子元素，因此您可能只需要检查以确保所有样式都正确，因为它现在将

标记嵌套在

标记中，而不是替换它

或者，您可以自己包装

标签。 例如：

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

{this.state.loading==true。。。

应该有用

更新（12/10/18）：

---

现在，文档中有一个更好的解释，解释了为什么会在官方文档中出现这种情况，并解释了如何将FontAwesome与javascript库集成。自动嵌套

标记的方法现在在脚本标记中完成，用于获取FontAwesome javascript库

e现在也是对的官方支持，它也解决了这个问题。

你能提供你的代码吗？@Cole我的代码没有什么特别之处。只要我的render（）中有类似

的东西 method@Cole事实上，这不是真的。我猜在卸载微调器时会发生错误？已用代码更新。我实际上必须离开，所以现在无法找到问题所在，但我确实建议将

this.state.load===true？

更改为

this.state.load？

。我也有同样的问题。这是专门开始发生的对我来说，从fontawesome 4升级到5之后。似乎是一个bug，与从DOM中删除react native中的fontawesome 5标记不兼容。我仍然没有找到解决方法。谢谢，我也有同样的问题，几乎发疯了。将我的

包装到另一个

中确实解决了这个问题。两种方法都有（FontAwesomeConfig和包装

）对我也很有效。我使用该配置来保持标记干净。谢谢！两个小时后，我发现了这个：）)谢谢，他们真的应该在文档中提到React，因为React不能很好地使用修改DOM的LIB。我决定现在使用css/webfont方法，而不是js/svg方法。