我的 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。
最佳答案
为了从箭头函数中隐式返回一个对象,您需要将 {
和 }
括号括在圆括号中,否则解释器不知道如何返回区别于以 {
:
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 }))
);
关于javascript - 在 React.js 中映射一个 JSON 常量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52961988/