Bug: Failed to execute 'insertBefore' on 'Node' And Failed to execute 'removeChild' on 'Node' with Chrome translate

[1291669609]

  const [oneShow, setOneShow] = useState(false);
  const [twoShow, setTwoShow] = useState(true);
  
  return (
    <div>
      <h1>插入节点错误</h1>
      <div>
        <span>（{oneShow && '插入节点' }）</span>
      </div>
      <button onClick={() => {
        setOneShow(true)
      }}>触发
      </button>

      <h1>删除节点错误</h1>
      <div>
        <span>（{twoShow && '删除节点' }）</span>
      </div>
      <button onClick={() => {
        setTwoShow(false)
      }}>触发
      </button>

    </div>
  );

这代码在进行谷歌翻译后(请选择翻译成非中文)分别会触发插入删除节点的错误。

---

Edited by @bvaughn to add translation:

This code will trigger the error of inserting and deleting nodes after Google translation (please choose to translate into non-Chinese).

[bvaughn]

This looks like a duplicate of #17256

---

这看起来像 #17256 的副本

[eps1lon]

Also possible duplicate of https://github.com/facebook/react/issues/11538. See https://github.com/facebook/react/issues/11538#issuecomment-417504600 for the latest update.

[haitaojarvis]

This is a widespread problem with a long history, and the solutions have been collected and organized so far: https://github.com/facebook/react/issues/11538#issuecomment-2094671717