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

但使书种多，会有岁稔时。这篇文章主要讲述Ant Design Pro V4.5 从服务器请求数据的坑（typescript版）#导入MD文档相关的知识，希望能为你提供帮助。
?
因为后台使用了APB所有前端的数据获取都围绕着APB的api进行开发，在做用户管理时，新建了页面加了model和server，数据也请求回来了，很久没有写前端了，有些生疏，出现了数据无法解析的情况，后台返回的数据如下

{ "result":{ "totalCount":1, "items":[ { "userName":"admin", "name":"admin", "surname":"admin", "emailAddress":"admin@aspnetboilerplate.com", "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,
})
都不对
【Ant Design Pro V4.5 从服务器请求数据的坑（typescript版）#导入MD文档】改成如下代码就可以了

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 =https://www.songbingjia.com/android/= 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> ] } ];

文章图片

?