Ant Design Pro V4.5 从服务器请求数据的坑（typescript版）

Posted 2021-09-01 Mango·

        因为后台使用了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,
            })

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

第一处

interface UserManageProps {

    dispatch: Dispatch;

    usermanage: UserManageStateType;

    loading?: boolean;

}

const UserManagePage: React.FC<UserManageProps> = (props) => {

    const { dispatch, loading, usermanage } = props;

第二处

 <Table columns={columns} 

                loading={loading}

                pagination={false}

                rowKey={'id'}

                dataSource={usermanage === undefined ? [] : usermanage.items} >

            </Table>

第三处

export default connect(({ usermanage, loading }: ConnectState) => ({

  usermanage,

  loading: loading.effects['usermanage/getAll'],

}))(UserManagePage);

第四处

export interface ConnectState {

  usermanage:UserManageStateType;

}

第五处

const UserManageModel : UserManageModelType = {

    namespace: 'usermanage',

    state: {

        totalCount: 0,

        items: []

    }, 

表格以及表格数据转换

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>]
        }
    ];