第一次拿不到數(shù)據(jù)，第二次拿到的是第一次的數(shù)據(jù)，后面每次都是拿到前一次的數(shù)據(jù)

第一次拿不到數(shù)據(jù)，第二次拿到的是第一次觸發(fā)的數(shù)據(jù)，后面每次拿到的都是前一次觸發(fā)的數(shù)據(jù)

取數(shù)據(jù)：

  getExpandData = (param) => {
    getModelVersion(param).then((result) => {
      if (result) {
        this.setState({
          subData: result, // 過濾之后的數(shù)據(jù)
        });
      }
    });
  };

嵌套的子表格展開：

 expandFunction = (expanded, record) => {
    const { showListDom } = this.state;
    if (record) { // 未展開
      const param = {
        modelId: record.id,
      };
      this.getExpandData(param); // 進(jìn)不去
      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方法內(nèi)：

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

回答

編輯回答

朽鹿

...肯定不行啊，

getExpandData = (param) => {
    **getModelVersion(param)**.then((result) => {//異步的
      if (result) {
        this.setState({
          subData: result, // 過濾之后的數(shù)據(jù)
        });
      }
    });
  };
const subList = this.state.**subData**.map((v) => {//其實(shí)還是上一次的數(shù)據(jù)，因?yàn)檫€沒異步完
    return {
      ...v,
      todo: v.status,
    };
  });

解決辦法1，改造，回調(diào)進(jìn)去

getExpandData = (param，cb) => {
    getModelVersion(param).then((result) => {
        if (result) {
            this.setState({
                subData: result, // 過濾之后的數(shù)據(jù)
            },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改造，我就不寫了

2018年6月13日 02:18

編輯回答