在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 计算一个值，例如 value = k * qtty。

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

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

我得到了配件损失 [未定义，未定义，未定义] 感谢您的帮助

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

解释为什么你得到未定义

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

等价于

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

看看怎么没有回报？因此返回值为undefined ...

看来，你要做的是返回一个对象，如果你想返回一个对象，你需要在一个简单的（一行，“隐含”返回）箭头函数中将返回值包装在()或者一个数组

第二个问题是，

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

不是有效对象。对象是键/值对，如

{key1: value1, key2: value2}

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

{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) to

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