javascript - 在 React.js 中映射一个 JSON 常量

Question

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

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

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

我正在尝试使用 ReactiveSearch组件并将其提供给MultiDataList's data field为此，它需要转化为:

[
  { 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

为了从箭头函数中隐式返回一个对象，您需要将 { 和 } 括号括在圆括号中，否则解释器不知道如何返回区别于以 {:

开头的普通功能 block

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 }))
);