使用RxJS处理json-server数据时返回undefined而非预期值的原因

我正在运行一个带有随机数据的json-server数据库：

{
  "status": [
        {
            "id": 3,
            "uid": 1,
            "isActive": false
        },
        {
            "id": 4,
            "uid": 3,
            "isActive": true
        }
    ]
}

我使用以下函数获取数据：

export async function getStatus(uid: number): Promise<Status>{
    return fetch(`http://localhost:3000/status?uid=${uid}`).then(res => res.json())    
}

当我运行以下代码时：

function isActive(id: number): Observable<boolean>{
    
    return from(getStatus(id))
        .pipe(map(value => {
                console.log (`Value of in map pipe: ${JSON.stringify(value)}`)
                return value.isActive
            })) 
}

function main() {
    isActive(1).subscribe({
            next: (value => console.log('answer: ' + value))
        })                 
}

main()

得到如下输出：

Value of in map pipe: [{"id":3,"uid":1,"isActive":false}]
answer: undefined // <-----

预期输出应为：

Value of in map pipe: [{"id":3,"uid":1,"isActive":false}]
answer: false // <-----

请问为何我得到的是undefined而非预期的false？

问题原因与解决方法 #

原因 #

json-server 使用查询参数（如?uid=1）返回的是匹配条件的对象数组，而非单个对象。你在map操作中尝试访问value.isActive，但此时value是一个数组，数组本身没有isActive属性，因此返回undefined。

解决方法 #

需要从返回的数组中取出目标对象，再访问其isActive属性，以下是两种常见处理方式：

1. 在isActive函数的map中直接取数组第一个元素：

function isActive(id: number): Observable<boolean>{
    return from(getStatus(id))
        .pipe(map(value => {
                console.log (`Value of in map pipe: ${JSON.stringify(value)}`)
                // 取数组第一个匹配对象，用可选链和空值合并避免报错
                return value[0]?.isActive ?? false;
            })) 
}

2. 修改getStatus函数，在请求层面处理数组：

export async function getStatus(uid: number): Promise<Status>{
    return fetch(`http://localhost:3000/status?uid=${uid}`)
        .then(res => res.json())
        .then(data => data[0] ?? {}); // 返回第一个匹配对象或空对象
}

修改后getStatus返回单个对象，原isActive函数的逻辑无需改动。

如果uid是唯一标识，也可以用json-server的参数限定返回数量：http://localhost:3000/status?uid=${uid}&_limit=1，确保只返回单个结果，但仍需处理数组结构。

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