使用React使用破折号操作符读取数据

Question

这似乎是非常愚蠢的我，但我有这个问题。有人能帮我一下吗?因此，我有一个API，我正在获取一些数据，似乎API响应具有这样的数据格式:

start-time:2323232
end-time:2332323

现在，当在我的react渲染组件中，我试图像这样显示数据:

{data.start-time}

我实际上得到一个错误，说时间是未定义的。在JSX中，是否存在不能用-分隔符或类似的东西读取/显示数据的规则?或者，有人知道我怎么解决这个问题吗?如有任何帮助，不胜感激。

Answer 1

不能使用start-time作为标识符。您需要使用方括号来访问属性，在本例中是

data["start-time"]

用于进一步引用对象属性访问器

Answer 2

如果属性名是有效的JavaScript标识符，则只能使用点表示法。

在JavaScript中，标识符是区分大小写的，可以包含Unicode字母、$、_和数字(0-9)，但不能以数字开头。

非有效标识符的属性必须通过括号表示法访问。

const data = { name: "stopwatch", "start-time": 2323232, "end-time": 2332323 };
console.log(data.name); // <- valid identifier
console.log(data["start-time"]); // <- invalid identifier