在 javascript reactjs 中映射对象数组时出错

Question

我有对象

const pipe = {
diameter: 200,
C: 120,
length: 40,
accesories: [
    {name: "Bend 90°", k: 0.9, qtty: 2},
    {name: "Gate Valve", k: 0.3, qtty: 1},
    {name: "Butterfly valve", k: 0.2, qtty: 1}
  ]
}

我需要遍历所有配件并用k计算一个值，例如值= k * qtty。

当我执行以下操作时，它不起作用

const perdidaslocales = (accesorio) => {accesorio.name, accesorio.k * accesorio.qtty}
const accesorieslosses = pipe.accesories.map(perdidaslocales);

我得到了配件损失 [undefined, undefined, undefined] 感谢您的帮助

Answer 1

替换

const perdidaslocales = (accesorio) => {accesorio.name, accesorio.k * accesorio.qtty}

与

const perdidaslocales = (accesorio) => {
   return { 
       name: accesorio.name,
       value: accesorio.k * accesorio.qtty
   }
}

最终结果应该是这样的：

[
  {name: "Bend 90°", value: 1.8},
  {name: "Gate Valve", value: 0.3},
  {name: "Butterfly valve", value: 0.2}
]

Answer 2

解释为什么你得到 undefined

const perdidaslocales = (accesorio) => {accesorio.name, accesorio.k * accesorio.qtty}

相当于

const perdidaslocales = (accesorio) => {
    accesorio.name; 
    accesorio.k * accesorio.qtty;
}

看看怎么没有return？因此 return 值为 undefined ...

看起来，你想要做的是 return 一个对象，在一个简单的（一行，"implied" return）箭头函数中你需要包装 return value in () 如果你想 return 对象或数组

第二个问题是，

{accesorio.name, accesorio.k * accesorio.qtty}

不是有效对象。对象是 key/value 对，如

{key1: value1, key2: value2}

因此，在您的情况下，您可以 return 名称和值，例如

{name: accesorio.name, value: accesorio.k * accesorio.qtty}

把这些放在一起，你得到

const pipe = {
    diameter: 200,
    C: 120,
    length: 40,
    accesories: [
        {name: "Bend 90°", k: 0.9, qtty: 2},
        {name: "Gate Valve", k: 0.3, qtty: 1},
        {name: "Butterfly valve", k: 0.2, qtty: 1}
    ]
}
const perdidaslocales = (accesorio) => ({name: accesorio.name, value: accesorio.k * accesorio.qtty});
const accesorieslosses = pipe.accesories.map(perdidaslocales);

console.log(accesorieslosses);

这可以使用对象解构来简化See this MDN documentation

const pipe = {
    diameter: 200,
    C: 120,
    length: 40,
    accesories: [
        {name: "Bend 90°", k: 0.9, qtty: 2},
        {name: "Gate Valve", k: 0.3, qtty: 1},
        {name: "Butterfly valve", k: 0.2, qtty: 1}
    ]
}
const perdidaslocales = ({name, k, qtty}) => ({name: name, value: k * qtty});
// object destructuring  ^^^^^^^^^^^^^^^
const accesorieslosses = pipe.accesories.map(perdidaslocales);

console.log(accesorieslosses);

可以进一步简化，使用 Shorthand Object property names (search for shorthand in this link) 到

const pipe = {
    diameter: 200,
    C: 120,
    length: 40,
    accesories: [
        {name: "Bend 90°", k: 0.9, qtty: 2},
        {name: "Gate Valve", k: 0.3, qtty: 1},
        {name: "Butterfly valve", k: 0.2, qtty: 1}
    ]
}
const perdidaslocales = ({name, k, qtty}) => ({name, value: k * qtty});
// Object shorthand property names             ^^^^^
const accesorieslosses = pipe.accesories.map(perdidaslocales);

console.log(accesorieslosses);

在 javascript reactjs 中映射对象数组时出错

Error mapping an array of objects in javascript reactjs

javascript

dictionary

object

ecmascript-6

arrow-functions