第一次拿不到数据，第二次拿到的是第一次的数据，后面每次都是拿到前一次的数据

Question

第一次拿不到数据，第二次拿到的是第一次触发的数据，后面每次拿到的都是前一次触发的数据

取数据：

  getExpandData = (param) => {
    getModelVersion(param).then((result) => {
      if (result) {
        this.setState({
          subData: result, // 过滤之后的数据
        });
      }
    });
  };

嵌套的子表格展开：

 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,
        },
      });
    }
  };
  

render方法内：

<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}
  />
      

Answer 1

...肯定不行啊，

getExpandData = (param) => {
    **getModelVersion(param)**.then((result) => {//异步的
      if (result) {
        this.setState({
          subData: result, // 过滤之后的数据
        });
      }
    });
  };
const subList = this.state.**subData**.map((v) => {//其实还是上一次的数据，因为还没异步完
    return {
      ...v,
      todo: v.status,
    };
  });

解决办法1，改造，回调进去

getExpandData = (param，cb) => {
    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,
            },
          });
      });
    }
  };

解决办法2，用async await改造，我就不写了

Answer 2

原因就是getExpandData是异步的， 你没有等待它返回数据就继续执行后面代码了。

解决方式就是getExpandData的回调函数中拿到数据后继续render