React：无法在“节点”上执行“removeChild”：要删除的节点不是该节点的子节点答案

【问题标题】：React: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this nodeReact：无法在“节点”上执行“removeChild”：要删除的节点不是该节点的子节点
【发布时间】：2019-12-05 13:17:43
【问题描述】：

我收到此错误“无法在 'Node' 上执行 'removeChild'：要删除的节点不是该节点的子节点。”。这是在我的第 3-4 个下拉选择之后发生的。

前几次我选择了一个下拉列表，表格渲染得很好，不知道为什么在第 3-4 次间歇性发生这种情况？！

下拉选择功能：

public handleDropdownChange(e) {

this.setState({ selectedOption: e.target.value });

{ setTimeout(() => {

  this.getDocuments();

}, 1000); }

{ setTimeout(() => {

  this.renderDocuments();

}, 2000); }

}

渲染文档功能：

 public renderDocuments() {

const docs = this.state.documents.map(document => {

  return (
    <tr>
      <td className="title">{document.Cells.results[3].Value }</td>
      <td className="site">{siteName}</td>
      <td className="path">{sitePath}</td>
      <td><a href={document.Cells.results[6].Value + '?web=1&action=edit'}>View File</a></td>
    </tr> 
  );

});

return (

  <div id="tableID" className="table-list-container">

    <table className="table-list">

      <thead>
        <th><button type="button" className="sort" data-sort="title">Title</button></th>
        <th><button type="button" className="sort" data-sort="site">Site</button></th>
        <th><button type="button" className="sort" data-sort="path">Path</button></th>
        <th><button type="button">View File</button></th>
      </thead>

      <tbody className="list">

        {docs}

      </tbody>

    </table>

    <table className="table-footer">
      <tr>
        <td className="table-pagination">
          <ul className="pagination"></ul>
        </td>
      </tr>
    </table>

  </div>

);

   }

渲染：

  public render(): React.ReactElement<IKimProps> {

    let { documents } = this.state;

    return (

      <div className={ styles.kim }>

        {"Display Items that are pending review by Favourite Colour:"}

        {documents.length === 0 && <p>Loading...</p>}

        <select id="dropdown" onChange={this.handleDropdownChange}>
          <option value="N/A">N/A</option>
          <option value="red">Red</option>
          <option value="green">Green</option>
          <option value="blue">Blue</option>
        </select>

        <br/><br/>

        {this.renderDocuments()}

     </div>

    );
  }

}

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

你是对的，JQuery 和 React 一起使用可能会产生这些结果。有足够的 React 包，我建议使用其中之一。

【讨论】：