Ant Design Pro V4.5 从服务器请求数据的坑（typescript版）#导入MD文档

Posted 2021-08-24 果

​

        因为后台使用了APB所有前端的数据获取都围绕着APB的api进行开发，在做用户管理时，新建了页面加了model和server，数据也请求回来了，很久没有写前端了，有些生疏，出现了数据无法解析的情况，后台返回的数据如下

{
"result":{
"totalCount":1,
"items":[
{
"userName":"admin",
"name":"admin",
"surname":"admin",
"emailAddress":"[e-mail]",
"isActive":true,
"fullName":"admin admin",
"lastLoginTime":null,
"creationTime":"2021-01-18T17:53:37.889321",
"roleNames":[
"ADMIN"
],
"id":1
}
]
},
"targetUrl":null,
"success":true,
"error":null,
"unAuthorizedRequest":false,
"__abp":true
}

下面无法解析的代码

第一种

yield put({

                type: \'selectUserManageList\',

payload: result.result.items,

                totalCount:result.result.totalCount,

            })

第二种

yield put({

                type: \'selectUserManageList\',

                payload: response.items,

                totalCount:response.totalCount,

            })

都不对

改成如下代码就可以了

const { result } = response;
            if(response.success==true)
            {
                console.log("result.success==true");
                callback(result.totalCount);
            }
            else
            {
                errorback();
            }
            yield put({
                type: \'selectUserManageList\',
                payload: result.items,
                totalCount:result.totalCount,
            })

    reducers: {
        selectUserManageList(state, { totalCount,payload }) {
            console.log(totalCount);
            return {
                ...state,
                totalCount:totalCount,
                items: payload
            };
        },

这种也可以

effects: {
        *getAll(input, {call, put}) {
            const { payload:{skipCount,maxResultCount},callback,errorback} = input;
            const response = yield call(getAllUserManage, {
                skipCount,maxResultCount
            });

            const { result } = response;
            if(response.success==true)
            {
                callback(response.result.totalCount);
            }
            else
            {
                errorback();
            }
            yield put({
                type: \'selectUserManageList\',
                payload: result,
                totalCount:response.result.totalCount,
            })
        },

reducers: {
        selectUserManageList(state, { totalCount,payload }) {
            return {
                ...state,
                totalCount:totalCount,
                items: payload.items
            };
        },

很奇怪，貌似const { result } = response;这个将json最外层的{"result":{"totalCount":1,"items":[中的result这一层给剥掉了，神奇，这个现象要研究一下，修改一下const { results } = response;多写一个s果然界面加载不出来了，看来const { result } = response; 中的result**是一种规范，会自动把服务器返回json**中的result转换成为一种类，result下一级的值直接可以通过result获取

​

当然这么写也是对的

yield put({
                type: \'selectUserManageList\',
                payload: response.result.items,
                totalCount:response.result.totalCount,
            })

还有一点要注意的是，有五处名称要统一，这样对于初学者可以避开很多坑

第一处

第二处

第三处

第四处

第五处

表格以及表格数据转换

function isActive(value:any)
    {
      if(value == true)
      {
        return "启用";
      }
      else{
        return "未启用";
      }
    }

    const columns = [
        {
            title: \'ID\',
            dataIndex: \'id\',
            key:\'id\'
        },
        {
            title: \'用户名\',
            dataIndex: \'userName\',
            key: \'userName\',
        },
        {
            title: \'姓名\',
            dataIndex: \'name\',
            key: \'name\',
        },
        {
            title: \'邮件\',
            dataIndex: \'emailAddress\',
            key: \'emailAddress\',
        },
        {
          title: \'是否启用\',
          dataIndex: \'isActive\',
          key: \'isActive\',
          render:(text,record) => isActive(text),
          // render:(text,record) => ISACTIVE[text],
        },
        {
            title: \'权限\',
            dataIndex: \'roleNames\',
            key: \'roleNames\',
        },
        {
            title: \'操作\',
            key: \'operation\',
            render: (record:UserManageDtoType) => [<a onClick={() => handleCreate(record,"新建")}>{"新建"}</a>,<span className="ant-divider"> </span>,<a onClick={() => handleDelete(record.id)}>{"删除"}</a>]
        }
    ];

​