反应bootstrap表手风琴不起作用

Question

我正在使用mobx反应。我有一个表手风琴动态创建。首先，我有父级行，对于子级行，我必须调用后端以获取子级行的数据。但是某些操作不起作用，因为当我单击一个父行时，我可以看到每个孩子中的孩子信息，而该信息仅适用于单击的父行。 在这里我添加图片

用户许可组件

import React, { Component } from "react";
import { observer, inject } from 'mobx-react';
import TableListLicense3 from './TableListLicense3';

@inject("licenseStore", "sessionStore")
@observer

class UserLicense extends Component {

  async componentDidMount() {

    let { match: { params: { username } } } = this.props
    await this.props.licenseStore.getLicensesByUsername(username)
  }

  render() {

    if (this.props.sessionStore.initialized) {
      return (<>
        <table className="table table-bordered table-hover"  >
          <thead >
            <tr >
              <th scope="col"></th>
              <th scope="col"></th>
              <th scope="col">LICENSE</th>
              <th scope="col">TOTAL ADS</th>
            </tr>
          </thead>
          <tfoot>
            <tr >
              <th scope="col"></th>
              <th scope="col"></th>
              <th scope="col">LICENSE</th>
              <th scope="col">TOTAL ADS</th>
            </tr>
          </tfoot>
            {this.props.licenseStore.licenses ? this.props.licenseStore.licenses.map((data, i) => {
              return (<>
                <TableListLicense3 data={data} i={i} key={i} username={this.props.match.params.username} />
              </>)
            }) : null}
        </table>

      </>)
    }
  }
}
export default UserLicense

表格组件

import React, { Component } from "react";
import { inject, observer } from 'mobx-react'

@inject("licenseStore")
@observer

class TableListLicense3 extends Component {

  handleOnclick = async (e) => {
    e.preventDefault()
    let username = this.props.username

    let id = e.target.getAttribute('data')
    await this.props.licenseStore.getAdsByLicenseId(username, id)
  }

  render() {
    let data = this.props.data
    let i = this.props.i
    let dataTarget = '#' + this.props.data._id

    return (<>
      <tbody>
        <tr key={data._id} onClick={(e) => { this.handleOnclick(e) }}

          id={data._id} className="clickable-row" data-toggle="collapse" data-target={dataTarget} aria-expanded="false" aria-controls={data._id} >
          <td data={data._id}><i className="fas fa-plus" aria-hidden="true" data={data._id}></i></td>
          <td data={data._id}>{i + 1}</td>
          <td data={data._id}>{data._id}</td>
          <td data={data._id}>{data.count}</td>
        </tr>
      </tbody>
      {this.props.licenseStore.ads ? this.props.licenseStore.ads.map((data, i) => {

        return (<>
          <tr key={i} data-toggle="collapse" >
            <td>{data.name}</td>
            <td>{data.city}</td>
            <td>{data.license.code}</td>
            <td>{data.administrativeOptions.workingUser}</td>
          </tr>
        </>)
      }) : null}
    </>)
  }
}
export default TableListLicense3