如何在React中处理API返回的Collections.singletonMap格式响应

我需要在调用API更新实体的subscribed_status属性时，在React中正确判断后端返回的响应状态。Java后端通过Collections.singletonMap返回两种格式的响应：

• {response: 'FAILURE'}
• {response: 'SUCCESS'}

当前尝试的条件判断因为res.data不是字符串而失效，比如下面的写法无法正常工作：

// 条件不生效，因为data不是字符串
if(res.data==='FAILURE'){
     // 执行某些操作
}

后端API实现代码：

@PatchMapping("/updateSubscribedStatus/{email}")
public Map<String, String> updateSubscribedStatus(@PathVariable String email) throws AlreadySubscribedException {
    try{
        Boolean updateStatus=userService.updateSubscribedStatus(email);
        if(updateStatus){
            return Collections.singletonMap("response", "SUCCESS");
        }
        return Collections.singletonMap("response", "FAILURE");
    }catch(Exception alreadySubscribedException){
        return Collections.singletonMap("response", "FAILURE");
    }
}

前端使用axios调用API的代码，希望收到{response: 'FAILURE'}时执行指定函数，但当前条件判断无效：

export const updateSubscribedStatus=(email:string,setSubscribedStatus:(subscribedStatus:boolean)=>void,toggleShowAlreadySubscribedError:()=>void)=>{
axios.patch(`http://localhost:8080/user/updateSubscribedStatus/${email}`)
    .then((res)=>{
        console.log(res.data);
        setSubscribedStatus(true);
        // 这里的if语句无法正常工作
        if(res.data.toString()==="FAILURE"){
            toggleShowAlreadySubscribedError();
        }
    }).catch((error)=>{
        console.log(error);
        setSubscribedStatus(false);
})}

问题核心是你没有正确访问响应对象的response字段——res.data是包含response属性的对象，并非字符串，直接和字符串对比或调用toString()都无法得到正确结果。

修改前端条件判断逻辑，直接访问res.data.response来判断状态，同时调整订阅状态的设置逻辑（原代码无论成功失败都先设为true，不符合业务逻辑）：

export const updateSubscribedStatus=(email:string,setSubscribedStatus:(subscribedStatus:boolean)=>void,toggleShowAlreadySubscribedError:()=>void)=>{
axios.patch(`http://localhost:8080/user/updateSubscribedStatus/${email}`)
    .then((res)=>{
        console.log(res.data);
        // 根据响应结果分支处理
        if(res.data.response === "FAILURE"){
            toggleShowAlreadySubscribedError();
            setSubscribedStatus(false);
        } else {
            setSubscribedStatus(true);
        }
    }).catch((error)=>{
        console.log(error);
        setSubscribedStatus(false);
})}

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