使用ant-design-pro 的EditableProTable賦值報錯

項目使用ant-pro的EditableProTable,在編輯時給表格數據賦值初始值的時候報錯,主要是因為這里面有文件展示

 

報錯內容如下

Error: Objects are not valid as a React child (found: object with keys {id, projectId, businessType, businessId, fileName, filePath, uploaderId, uploaderName, createTime, updateTime}).

 If you meant to render a collection of children, use an array instead.

 

一開始看這個以為是數據格式不對,改了好多種,發現只要是有數組數據就報錯

賦值信息代碼

  // 獲取信息
  const getProjectRisk = async () => {
    const res = await getProjectRiskInfo(projectId) // 調接口獲取后台數據
    const { data } = res
    if (data && data.projectRiskMitigantsList && data.projectRiskMitigantsList.length) {
      setDataSource(data.projectRiskMitigantsList)
      setEditableRowKeys(() => 
        data.projectRiskMitigantsList.map((item) => item.id)
      )
    }
  }

數據格式:

pro的EditableProTable的編輯是根據設置的editableKeys來編輯的,我一開始的賦值是先setDataSource設置表格數據,再設置setEditableRowKeys的數據,正確的應該先設置setEditableRowKeys,

 

將代碼修改

// 獲取信息
  const getProjectRisk = async () => {
    const res = await getProjectRiskInfo(projectId)
    const { data } = res
    if (data && data.projectRiskMitigantsList && data.projectRiskMitigantsList.length) {
      setEditableRowKeys(() => 
        data.projectRiskMitigantsList.map((item) => item.id) )
      setDataSource(data.projectRiskMitigantsList)
    }
  }

  修改后就能正常展示了