React中如何解构含特殊字符键名的对象并拆分处理

尝试解构后端返回的、键名为UUID格式的对象以分离指定键值对时，出现':' expected.ts(1005)错误。相关代码如下：

useEffect(() => {
    const tempUserShortId = getTempUserShortId()
    axios({
        method: 'get',
        url: `questionList?tempUserId=${tempUserShortId}&questionIds[]=6f50dbea-196b-4fb6-82ee-fbade62aab98&questionIds[]=6f50dbea-196b-4fb6-82ee-fbade62aab99&questionIds[]=6f50dbea-196b-4fb6-82ee-fbade62aab9a`,
        headers: { crossDomain: true },
    }).then((res) => {
        // 此处触发语法错误
        const {'6f50dbea-196b-4fb6-82ee-fbade62aab9a', ...rest} = res.data;
        setQuestions(rest)
    })
}, [ind])

后端返回的对象结构示例：

{
    "6F50DBEA-196B-4FB6-82EE-FBADE62AAB99": {
        "text": "Mennyire forradalmi az ETH 2.0 bevezetése?",
        "options": {
            "1CD0D2C0-7494-4BE6-ADE6-E454816B584E": {
                "text": "Forradalmi mert PoW helyett PoS lesz. Kevesebb energiát fog fogyasztani a rendszer. Viszont ez még mindig nem skálázható megoldás, a shardingot még nem tudja, és még hosszú évekig nem is fogja tudni, így a tranzakciós díj ugyanúgy magas fog maradni.",
                "rating": {}
            }
        }
    },
    "6F50DBEA-196B-4FB6-82EE-FBADE62AAB98": {}
}

问题根源在于：带连字符的UUID不能直接作为合法变量名，解构时必须通过:为其指定一个合法变量名。修改后的代码如下：

useEffect(() => {
    const tempUserShortId = getTempUserShortId()
    axios({
        method: 'get',
        url: `questionList?tempUserId=${tempUserShortId}&questionIds[]=6f50dbea-196b-4fb6-82ee-fbade62aab98&questionIds[]=6f50dbea-196b-4fb6-82ee-fbade62aab99&questionIds[]=6f50dbea-196b-4fb6-82ee-fbade62aab9a`,
        headers: { crossDomain: true },
    }).then((res) => {
        // 给UUID键重命名为合法变量名
        const {'6f50dbea-196b-4fb6-82ee-fbade62aab9a': targetQuestion, ...rest} = res.data;
        // 如需单独处理targetQuestion可在此编写逻辑
        setQuestions(rest)
    })
}, [ind])

关键说明 #

• 当对象键名包含特殊字符（如连字符、空格）或以数字开头时，解构必须使用键名: 变量名的形式重命名，否则JS/TS会判定为语法错误。
• 若不需要保留该键值对，可使用下划线作为占位符忽略它：{'6f50dbea-196b-4fb6-82ee-fbade62aab9a': _, ...rest}

内容的提问来源于stack exchange，提问作者János