React接收后端返回数组元素为空对象的问题排查

问题场景 #

用React + C#开发网站，从数据库取数据时遇到异常：后端调试数据正常，但前端resp.json()拿到的数组长度正确，每个元素却是空对象。

相关代码如下：

后端控制器代码 #

[HttpGet("GetUsersListByRoleAsync")]
public async Task<ActionResult<IEnumerable<UserSimple>>> GetUsersListByRoleAsync(int roleId)
{
    try
    {
        IEnumerable<UserSimple> result = await aRepo.GetUsersListByRoleAsync(roleId);
        return Ok(result);
    }
    catch (Exception ex)
    {
        return BadRequest(ex.Message);
    }
}

后端UserSimple类定义 #

public class UserSimple
{
    int Id_User { get; set; }
    string DomainName { get; set; }
}

前端DbHandler方法 #

async GetUsersListByRoleAsync(roleId: number): Promise<UserSimple[]> {
    const resp = await fetch(`api/Administration/GetUsersListByRoleAsync?roleId=${roleId}`, {credentials: "include"})

    if (resp.status >= 400)
        throw new Error(`[AdministrationDbHandler]: ${await resp.text()}`)

    const usersList = await resp.json() as UserSimple[]
    return usersList
}

前端UserSimple类型定义 #

export type UserSimple = {
    id_User: number
    domainName: string
}

问题原因 #

后端UserSimple类的属性没有显式设置public访问修饰符，C#中类成员默认是private。ASP.NET Core默认的JSON序列化组件无法访问private属性，因此序列化后的每个UserSimple对象都是空的，前端解析后自然得到空对象数组，但数组长度和后端返回的集合数量一致。

解决方法 #

把UserSimple类的属性改成public，让序列化组件能读取到属性值：

public class UserSimple
{
    public int Id_User { get; set; }
    public string DomainName { get; set; }
}

内容的提问来源于stack exchange，提问作者Quribe