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说“ Expression语句不是赋值或调用”。

使用单个项目在数组中进行映射就可以了，例如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 }))
);

请注意，无需在对象属性周围加上引号（默认情况下假定为字符串）-仅需将字符串 values 括在字符串定界符中。

使用解构的另一种方法：

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

Answer 2

是的，您略有错误。

buf[--len]

在ES5语法中，它看起来像这样：

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

还请注意返回对象周围的寄生物。这是必要的。

您也可以这样做。

original.map(config=>({label:config.id,value:config.desc}))

在React.js中映射JSON常量

2 个答案: