EditableProTable可编辑表格无数据时渲染下拉框组件？怎么处理？

Question

• 需求：需要用ProComponents组件库中的EditableProTable - 可编辑表格实现。没有数据时，可以显示一条类似于‘空’数据，其中‘sku’可以进行添加数据。其中sku中的select组件是已经封装好的。
  具体效果如下图（参考）：

• 添加数据后的效果为：

• 问题：现在遇到的问题是无法在没有数据时渲染出sku中的select组件。一直显示没有数据。
  目前代码实现的效果为：

• 具体代码如下：

1. 获取列表信息代码：

  const [detailsData, setDetailsData] = useState([]);
  const [editableKeys, setEditableRowKeys] = useState([]);
  const editorFormRef = useRef<EditableFormInstance<ProColumns>>();

  useEffect(() => {
    getProductBomList();
  }, []);

  // 根据产品ID获取组件信息
  const getProductBomList = () => {
    // if (productId == 0) return;
    const productId = sid;
    getProductBom({ productId }).then((res: any) => {
      console.log('res是什么？', res);
      unstable_batchedUpdates(() => {
        // setSheetData(res);
        setDetailsData(res.concat([{ sid: 0 }]));
      });
    });
  };

1. 渲染列表信息代码：

  // 编辑组件信息
  const handleSave = (row) => {
    console.log('row==>', row);
    const index = detailsData.findIndex((item) => row.sid === item.sid);
    let newData;
    if (index === detailsData.length - 1 && (row.sku || row.quantity > 0)) {
      newData = [...detailsData, { sid: 0 }];
    } else {
      newData = [...detailsData];
    }
    const item = newData[index];
    // if (!row.sid) row.sid = -detailsData.length;
    newData.splice(index, 1, { ...item, ...row });
    setDetailsData(newData);
  };

1. 保存组件信息及组件表格代码：

  //保存组件信息
  const handleOnSave = () => {
    const data = detailsData
      .filter((a) => a.productId > 0)
      .map((a) => ({
        ...a,
        // createDate: '',
        // orderNo: sheetData.orderNo,
        // subProductId,
      }));
    console.log('保存组件信息===>', data);
    postEditProductBom(data).then(() => {
      message.success('组件信息保存成功');
      getProductBomList();
    });
  };

  // 组件信息 表格
  const moduleColumns: any = [
    {
      title: t('order.pic'),
      dataIndex: 'pic',
      formItemProps,
      width: 100,
      // editable: true,
      // renderText: (pic: string) =>
      //   !!pic && <Image className="data-img-src" src={pic} />,
    },
    {
      title: 'SKU',
      tooltip: t('common.sku_tip'),
      dataIndex: 'sku',
      formItemProps,
      width: 150,
      // editable: true,
      render: (a: any, record) => {
        return record.sku ? (
          <>{a}</>
        ) : (
          <Selector
            onSelected={(selected) => {
              handleSave({
                sid: record.sid,
                sku: selected.sku,
                title: selected.title,
                productId: selected.sid,
                pic: selected.pic,
              });
            }}
            isSku={true}
            searchName="search"
            title={t('wms.skutip3')}
            load={fecthOnlyProductList}
            // refreshPage={true}
          />
        );
      },
    },
    {
      title: t('order.tit'),
      dataIndex: 'title',
      formItemProps,
      width: 150,
      // editable: true,
    },
    {
      title: t('wms.num'),
      valueType: 'digit',
      dataIndex: 'num',
      editable: true,
      width: 100,
      // readonly: actionType === 1 ? false : true,
      // formItemProps: actionType === 1 ? formItemProps : false,
    },
    {
      title: '重量',
      dataIndex: 'weight',
      formItemProps,
      width: 100,
      editable: true,
    },
    {
      title: t('order.memo'),
      dataIndex: 'memo',
      formItemProps,
      width: 150,
      editable: true,
    },
    {
      title: t('wms.operate'),
      valueType: 'option',
      width: 50,
      render: (text: any, record: any, rowIndex: number) => (
        <>
          {/* {record.sid > 0 && record.sku === '' && (
            <Button
              type="link"
              onClick={() => {
                showDrawer(record);
              }}
              // disabled={record.sku !== ''}
            >
              {t('order.edit')}
            </Button>
          )} */}
          <Popconfirm
            title={t('wms.deletetip1')}
            onConfirm={() => handleDel(record.sid)}
          >
            <Button
              type="link"
            >
              {t('order.delete')}
            </Button>
          </Popconfirm>
        </>
      ),
    },
  ];

  //组件编辑列表
  const moduleEditColumns = moduleColumns.map((col) => {
    if (!col.editable) {
      console.log('编辑行不存在', col);
      return col;
    }
    console.log('可编辑行', col);
    return {
      ...col,
      onCell: (record): any => ({
        record,
        editable: col.editable,
        dataIndex: col.dataIndex,
        title: col.title,
        handleSave,
      }),
    };
  });

1. 可编辑表格组件代码：

 {/* 组件 */}
              {productId && (
                // <Card>
                <EditableProTable
                  recordCreatorProps={false}
                  headerTitle="组件"
                  rowKey="sid"
                  // loading={productId !== 0 && !sheetData}
                  columns={moduleEditColumns}
                  editableFormRef={editorFormRef}
                  components={editableRowCol}
                  value={detailsData}
                  pagination={false}
                  toolBarRender={() => [
                    // detailsData?.length - 1 > 0 && (
                    <Button
                      onClick={handleOnSave}
                      type="primary"
                      htmlType="submit"
                    >
                      保存
                    </Button>,
                    // ),
                  ]}
                  editable={{
                    form,
                    // onSave: (_, record) => {
                    //   return Promise.resolve()
                    // },
                    editableKeys: editableKeys,
                    onChange: setEditableRowKeys,
                    actionRender: (row, config, dom) => [dom.save, dom.cancel],
                  }}
                  tableExtraRender={() => <></>}
                />
                // </Card>
              )}

1. 接口文档：

Answer 1

看接口返回的数据在data节点下，应该是res.data.concat吧？打印的res结构什么样的？

setDetailsData(res.data.concat([{ sid: 0 }]));