在 React.js 中映射 JSON const

Question

我的constReact.js 应用程序中有一堆配置，JSON 如下所示：

const original = [
  { 'id': '1', 'desc': 'AAA', 'isOK': true },
  { 'id': '2', 'desc': 'BBB', 'isOK': true },
  { 'id': '3', 'desc': 'CCC', 'isOK': false },
  ...
];

它包含一堆配置，我可能会将它们放在一个单独的文件中，但现在我想测试它并认为 aconst是合适的。

我正在尝试使用ReactiveSearch组件并将其提供给需要转换为MultiDataList的data字段：

[
  { label: '1', value: 'AAA' },
  { label: '2', value: 'BBB' },
  { value: '3', value: 'CCC' },
  ...
]

我原以为original.map(e => { 'label': e.id, 'value': e.desc })这可以解决问题，但我在第一个冒号处得到了“意外标记”。IntelliJ 说“表达式语句不是赋值或调用”。

用单个项目映射数组工作得很好，例如original.map(e => e.id)，所以我不太确定我做错了什么。我只是开始修改 JavaScript 和 React.js。

Answer 1

为了从箭头函数隐式返回一个对象，您需要将{和}括号括在括号中，否则解释器不知道如何将其与以 开头的普通功能块区分开来{：

const original = [
  { 'id': '1', 'desc': 'AAA', 'isOK': true },
  { 'id': '2', 'desc': 'BBB', 'isOK': true },
  { 'id': '3', 'desc': 'CCC', 'isOK': false },
];

console.log(
  original.map(e => ({ label: e.id, value: e.desc }))
);

请注意，不需要在对象属性（默认情况下假定为字符串）周围加上引号 - 只有字符串值需要包含在字符串分隔符中。

另一种方法，使用解构：

const original = [
  { 'id': '1', 'desc': 'AAA', 'isOK': true },
  { 'id': '2', 'desc': 'BBB', 'isOK': true },
  { 'id': '3', 'desc': 'CCC', 'isOK': false },
];

console.log(
  original.map(({ id, desc }) => ({ label: id, value: desc }))
  // or:
  // original.map(({ id: label, desc: value }) => ({ label, value }))
);