在 React 中映射包含点的数据答案

【问题标题】：Mapping data that contains dots in React在 React 中映射包含点的数据
【发布时间】：2020-07-03 21:26:45
【问题描述】：

我正在尝试 map React 中来自 API 的数据，但我在映射包含 dots 的对象时遇到问题，例如：name.en_US。映射此对象并保留我拥有的数据结构的正确方法是什么？

我从 API 获取这种格式的日期：

{
    "user": "User",
    "employeeId": "0000",
    "businessCustomer": "customer",
    "endCustomer": {
        "name": "",
        "address": "",
        "place": ""
    },
    "device": {
        "shipmentIds": "23",
        "name.en_US": "wasi",
        "name.fi_FI": " masi"
    },
    "task": {
        "time": "2019-02-10T16:55:46.188Z",
        "duration": "00:00:24",
        "sum": "75€"
    }
},

然后我尝试使用以下代码对其进行映射。

  const {
    user,
    employeeId,
    businessCustomer,
    endCustomer,
    device,
    task
  } = task;

  const{
    endCustomerName,
    address,
    place
  } = endCustomer;

  const {
    shipmentIds,
    names
  } = device;

  const{
    en_US,
    fi_FI
  } = names;

  const {
    time,
    duration,
    summa
  } = task;

【问题讨论】：

标签： json reactjs react-native mapping

【解决方案1】：

const data = {
    "user": "User",
    "employeeId": "0000",
    "businessCustomer": "customer",
    "endCustomer": {
        "name": "",
        "address": "",
        "place": ""
    },
    "device": {
        "shipmentIds": "23",
        "name.en_US": "wasi",
        "name.fi_FI": " masi"
    },
    "task": {
        "time": "2019-02-10T16:55:46.188Z",
        "duration": "00:00:24",
        "sum": "75€"
    }
};

const { device } = data;

const {
    shipmentIds,
    'name.en_US': name_en_US,
    'name.fi_FI': name_fi_FI
} = device;

const nameUS = device['name.en_US'];

console.log(name_en_US, nameUS);

使用[ ] 表示法，例如device['name.en_US']。

【讨论】：

我会在哪里添加这个？在设备 const 内部还是作为单独的 const？
不幸的是，你不能用这些来解构对象。所以你可以使用一个新的常量或者在任何需要的地方直接使用它，比如：const usName = device['name.en_US'];
这很奇怪。我可以使它适用于两个答案。用数据添加一个 sn-p。
我删除了评论，但问题是它是 names. 而不是 name。我复制了旧数据，这完全是我的错。

【解决方案2】：

你可以像@Vishnu 提到的那样解构你的财产，或者你也可以通过提供一个有效的键名来解构它

const {
    shipmentIds,
    'name.en_US': name_en_US,
    'name.fi_FI': name_fi_FI
} = device;

然后您可以使用name_en_US 访问您的变量。

【讨论】：