React中读取带横杠的API返回数据报错time未定义如何解决

问题原因 #

这不是JSX的专属限制，是JavaScript原生语法规则导致的：

• JavaScript的标识符（变量名、对象点操作符访问的属性名）不允许包含-字符
• 你写的data.start-time会被JS引擎解析为data.start 减去 time的减法运算，自然会抛出time未定义的报错

解决方案 #

有两种常用的处理方式：

1. 直接使用方括号语法访问带特殊字符的属性，把属性名作为字符串传入方括号即可，无需修改后端返回结构：

{data['start-time']}
{data['end-time']}

2. 拿到接口返回数据后统一做字段命名转换，把横杠分隔的命名转成前端常用的驼峰命名，后续使用更便捷：

// 接口请求成功后处理数据
const transformData = (rawData) => {
  return {
    startTime: rawData['start-time'],
    endTime: rawData['end-time'],
    // 其余字段同理转换
  }
}

// 组件渲染时直接用点操作符访问驼峰属性
{transformedData.startTime}

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