The first time you can't get the data, the second time you get the data from the first time, and every time you get the data from the previous time.

the first time you can"t get the data, the second time you get the data triggered by the first time, and then each time you get the data from the previous trigger

fetch data:

  getExpandData = (param) => {
    getModelVersion(param).then((result) => {
      if (result) {
        this.setState({
          subData: result, // 
        });
      }
    });
  };

expansion of nested subtables:

 expandFunction = (expanded, record) => {
    const { showListDom } = this.state;
    if (record) { // 
      const param = {
        modelId: record.id,
      };
      this.getExpandData(param); // 
      const subList = this.state.subData.map((v) => {
        return {
          ...v,
          todo: v.status,
        };
      });
      const dom = (
        <Table
          columns={this.detailsColumns}
          onChange={this.handleSubTableChange}
          dataSource={subList}
          rowKey={subList.id}
          pagination={false}
        />);
      const Id = record.id;
      const item = {};
      item[Id] = dom;
      this.setState({
        showListDom: {
          ...showListDom,
          ...item,
        },
      });
    }
  };
  

within the render method:

<Table
    dataSource={this.state.SampleData}
    rowKey={record => record.id || record.key}
    columns={columns}
    onChange={this.handleStandardTableChange}
    pagination={this.state.pagination}
    loading={this.state.loading}
    expandedRowRender={(record) => { return this.state.showListDom[record.id] || null; }}
    onExpand={(expanded, record) => this.expandFunction(expanded, record) || null}
  />
      
May.06,2021

. Definitely not,

getExpandData = (param) => {
    **getModelVersion(param)**.then((result) => {//
      if (result) {
        this.setState({
          subData: result, // 
        });
      }
    });
  };
const subList = this.state.**subData**.map((v) => {//
    return {
      ...v,
      todo: v.status,
    };
  });

solution 1, transform, callback in

getExpandData = (paramcb) => {
    getModelVersion(param).then((result) => {
        if (result) {
            this.setState({
                subData: result, // 
            },cb);
        }
    });
  };
 expandFunction = (expanded, record) => {
    const { showListDom } = this.state;
    if (record) { // 
      const param = {
        modelId: record.id,
      };
      this.getExpandData(param,()=>{
          const subList = this.state.subData.map((v) => {
            return {
              ...v,
              todo: v.status,
            };
          });
          const dom = (
            <Table
              columns={this.detailsColumns}
              onChange={this.handleSubTableChange}
              dataSource={subList}
              rowKey={subList.id}
              pagination={false}
            />);
          const Id = record.id;
          const item = {};
          item[Id] = dom;
          this.setState({
            showListDom: {
              ...showListDom,
              ...item,
            },
          });
      });
    }
  };

solution 2, change it with async await, and I won't write

.

the reason is that getExpandData is asynchronous, and you continue to execute the following code without waiting for it to return data.

the solution is to get the data from the callback function of getExpandData and continue to render

Menu