ant 嵌套子表格 点击父表格，子表格的数据全部变成一样的了？？

Question

使用ant框架，要在表格里面嵌套子表格，需要在用户点击父表格 前面的 + 图标后，去异步请求后台的数据用来填充子表格的内容。就会出现点击 父表格，子表格的所有数据都变成相同的了
注意： 父表格的数据是一个接口，子表格的数据是另一个接口，两者不在一块

父表格后台返回的数据格式为：

{
    "instContractListQueryRequest":null,
    "success":true,
    "status":"success",
    "resultCode":"",
    "resultMsg":"",
    "result":{
        "pageInfoVO":{
            "currentPage":1,
            "itemsPerPage":10,
            "totalItems":620,
            "totalPages":62
        },
        "resultObj":[
            {
                "auditNo":"",
                "auditStatus":"",
                "auditUrl":"",
                "contractBatchAuditDate":"",
                "contractBatchCreateDate":"",
                "contractBatchNo":"180903556221",
                "contractBatchStatus":"",
                "contractBatchUniqueNo":"180903556221",
                "creator":"",
                "effectiveDate":"",
                "gmtCreate":null,
                "gmtModified":null,
                "instAlipayAccountNo":"[e-mail]",
                "instShortName":"中国光大银行浙江分行",
                "invalidDate":"",
                "memo":"",
                "solutionName":"借呗机构方案"
            }
           ]
      }
}

子表格后台返回的数据格式：

{
    "instContractListQueryRequest":null,
    "success":true,
    "status":"success",
    "resultCode":"",
    "resultMsg":"",
    "result": {
    "pageInfoVO": {
      "totalItems": 620,
      "totalPages": 62,
      "currentPage": 2,
      "itemsPerPage": 10
    },
    "resultObj": [
     {
      "contractBatchUniqueNo": "180919591049",
      "contractBatchNo": "180919591049",
      "instShortName": null,
      "solutionName": null,
      "auditStatus": "P",
      "memo": null,
      "contractBatchStatus": "已生效",
      "auditNo": null,
      "auditUrl": "http://antprocess.stable.alipay.net/ticket/dispatch/antprocess-sign_1_180919591049?type=detail",
      "contractBatchCreateDate": null,
      "contractBatchAuditDate": null,
      "creator": null,
      "instAlipayAccountNo": null,
      "effectiveDate": "2018-09-19 12:04:50",
      "invalidDate": "9999-12-31 23:59",
      "contractDisplayVOList": null,
      "gmtCreate": null,
      "gmtModified": null
    }
    ]
  }
}

主要代码：（省略无关代码）table.js

import React, { PureComponent } from '@alipay/bigfish/react';
import { Table, Badge } from '@alipay/bigfish/antd';
import { Link } from '@alipay/bigfish/sdk/router';
import styles from './index.less';
import { connect } from '@alipay/bigfish/sdk';



@connect(state => ({
  conQuerySon: state.contractQuerySon,

})) 

class ContractTable extends PureComponent {

  handleTableExpand = (expended, record) => {
    record.isShow = expended ? '收起' : '展开';

    const { dispatch } = this.props;
 
    if (expended === false) {
      console.log("合并！");
      
    } else {
      console.log("展开！");
      dispatch({
        type: 'contractQuerySon/fetchConQuerySon',
        payload: {
          contractBatchUniqueNo: record.contractBatchUniqueNo,
        },
      });
    }
  }
  

  render() {
    const { loading } = this.props;
    const { conQuerySon } = this.props; 

    const expandedRowRender = (expended, record) => {

      const dataSon = conQuerySon.data.contractListSon;  // dataSon子表格数据
    
      const columns = [ ... ];
  
      return (
        <Table
          columns={columns}
          dataSource={dataSon}
          pagination={false}
          rowKey={record => (record.contractBatchNo)}
        />
      );
    };
    const columns = [ ... ];

    const data = this.props.data.contractList; // data父表格的数据

    return (
      <Table
        className="components-table-demo-nested"
        columns={columns}
        expandedRowRender={expandedRowRender}
        dataSource={data}
        loading={loading}
        pagination={true}
        rowKey={record => (record.contractBatchUniqueNo)}
        onExpand={this.handleTableExpand}
       
      />
    );
  }
}
export default ContractTable;

model层：

import { message } from '@alipay/bigfish/antd';
import { queryContractBatchListDetail } from '../service/api';

export default {
  // 命名空间
  namespace: 'contractQuerySon',

  // 状态对象
  state: {
    data: {
      contractListSon: [],
    },
  },

  effects: {

    * fetchConQuerySon({ payload }, { call, put }) {
  
      const response = yield call(queryContractBatchListDetail, payload);
   
      if (response !== null && response.success === false) {
        message.error(response.resultMsg);
      } else {
        yield put({
          type: 'saveSon',
          payload: response.result,
        });
      }
    },
  },

  reducers: {

    saveSon(state, action) {
      return {
        ...state,
        data: {
          ...state.data,
          contractListSon: action.payload,
        },
      };
    },
  },
};

Answer 1

一个对象存储所有的二级Table的数据

 // model层 
  stateData: {
     '1': {list:[], pagination:{page: 1, size: 10, total: 20}}
     '2': {list:[], pagination:{page: 1, size: 10, total: 20}}
  }

在页面上

<Table
  onExpand={(expended, record) => {
    const {stateData} = this.props;
    const {list=[], pagination} = stateData[record.ID];
    ...// 省略代码
    return (
        <Table
          columns={columns}
          dataSource={list}
          pagination={...pagination}
          rowKey={d => (d.contractBatchNo)}
        />
      );
 }}
/>
    

Answer 2

你可以设置只展开一个,其余的全部关闭.

Answer 3

正确实现效果：感觉还可以在优化一下，感兴趣的同学可以直接在回答中说出你的想法

自己 结合 https://blog.csdn.net/z3y3m3/... 一文，实现了效果

组件文件index.js

dva model层：

代码块：index.js

import React, { PureComponent } from '@alipay/bigfish/react';
import { Table, Badge } from '@alipay/bigfish/antd';
import { Link } from '@alipay/bigfish/sdk/router';
import styles from './index.less';
import { connect } from '@alipay/bigfish/sdk';

@connect(state => ({
  conQuerySon: state.contractQuerySon,
}))

class ContractTable extends PureComponent {
  state = {
    subTabData: {
    }
  }
 
  handleTableExpand = (expended, record) => {
    record.isShow = expended ? '收起' : '展开';
    const params = record.contractBatchUniqueNo;
    if ( expended === false ) {
      console.log('合并');
      this.setState({
        subTabData: {
          ...this.state.subTabData,
          [record.contractBatchUniqueNo]: [] ,
        }
      });
    }else{
      console.log('展开');
      const { dispatch } = this.props;
      dispatch({
        type: 'contractQuerySon/fetchConQuerySon',
        payload: {
          contractBatchUniqueNo: params
        },
        callback: ( res ) => {
          this.setState({
            subTabData: {
              ...this.state.subTabData,
              [record.contractBatchUniqueNo]: res ,
            }
          });
          console.log("返回数据(PlanList):" + JSON.stringify(this.state.subTabData));
        }
      });
    }
  }
  
  render() {
    const { loading } = this.props;

    const expandedRowRender = (expended, record) => {
      const list = this.state.subTabData[expended.contractBatchUniqueNo];
      console.log('list: ', list);
      if (list === undefined) {
        debugger;
        return [];
      }

      const columns = [ ... ];

      return (
        <Table
          columns={columns}
          dataSource={list.result}
          pagination={false}
          rowKey={record => (record.contractBatchNo)}
        />
      );
    };
    const columns = [ ... ];

    const data = this.props.data.contractList;
    return (
      <Table
        className="components-table-demo-nested"
        columns={columns}
        expandedRowRender={expandedRowRender}
        dataSource={data}
        loading={loading}
        pagination={true}
        rowKey={record => (record.contractBatchUniqueNo)}
        onExpand={this.handleTableExpand}
      />
    );
  }
}
export default ContractTable;

dva model层 代码块：

import { queryContractBatchListDetail } from '../service/api';

export default {
  // 命名空间
  namespace: 'contractQuerySon',

  // 状态对象
  state: {
    data: {
      contractListSon: [],
    },
  },

  effects: {
    * fetchConQuerySon({ payload, callback }, { call, put }) {
      yield put({
        type: 'changeLoading',
        payload: true,
      });

      const response = yield call(queryContractBatchListDetail, payload);
      if (response !== null && response.success === false) {
        message.error(response.resultMsg);
      } else {
        yield put({
          type: 'saveSon',
          payload: response.result,
        });

        if ( callback && typeof callback === 'function' ) {
          callback( response ); // 返回结果
        }

      }
  },

  reducers: {
    saveSon(state, action) {
      const { contractListSon } = state; 
      return {
        ...state,
        data: {
          ...state.data,
          contractListSon: action.payload,  
        },
      };
    },
};