使用 React 使用破折号运算符读取数据答案

【问题标题】：Read data with dash operator using React使用 React 使用破折号运算符读取数据
【发布时间】：2021-11-18 00:08:23
【问题描述】：

这对我来说似乎很愚蠢，但我遇到了这个问题。任何人都可以帮我解决这个问题。所以，我有一个 API，我正在获取一些数据，并且似乎 API 响应具有这样的数据格式：

start-time:2323232
end-time:2332323

现在，当在我的反应渲染组件中，我试图显示这样的数据：

{data.start-time}

我实际上收到一个错误，说时间未定义。是否有任何规则我们无法使用 - 分隔符或类似的东西在 JSX 中读取/显示数据。或者，有谁知道我该如何解决这个问题。任何帮助将不胜感激。

【问题讨论】：

data["start-time"]，你不能把start-time当作一个标识符来使用，因为它不是。
在 javascript 中你不能在变量名中使用破折号。所以 start-time 会引发错误。要从对象中读取与开始时间相关的值，您应该写 data["start-time"]
这能回答你的问题吗？ Are dashes allowed in javascript property names?

标签： javascript reactjs react-native jsx

【解决方案1】：

您不能使用start-time 作为标识符。在这种情况下，您需要使用方括号来访问该属性

data["start-time"]

更多参考Object property accessors

【讨论】：

【解决方案2】：

如果属性名称是有效的 JavaScript identifier，则只能使用 dot notation。

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

必须通过bracket notation 访问不是有效标识符的属性。

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

【讨论】：