映射和对象反应答案

【问题标题】：map through and object in react映射和对象反应
【发布时间】：2023-03-05 19:35:02
【问题描述】：

我想使用迭代创建一个像这样的对象： opts = [{label:1, value:1}, {label:4, value:4}] 此对象内的值位于数组 portArray = [1,4] 内我在写

const portArray = [1,4];
     return {
       portArray.map(value =>
       ({ label: value value: value }))
     };
   });

但它似乎不起作用。我错过了一些东西，但我不知道是什么。有任何想法吗？

【问题讨论】：

你少了一个逗号。 ({ label: value value: value })) 应该是 ({ label: value, value: value }))。

标签： javascript reactjs object iteration

【解决方案1】：

您提供的代码无效。它包含非法的return 语句。

您可以使用例如达到所需的解决方案。 Object.assign。

const portArray = [1, 4],
      res = portArray.map(v => Object.assign({}, { label: v, value: v }));
      console.log(res);

【讨论】：

【解决方案2】：

您提供的代码很混乱，但我想我明白了您的问题的重点。由于map 返回一个新数组，假设您有这个数组：var portArray = [1,4];，您可以像这样使用 map：

function manipulateArray(data) {
  return data.map((value) => {
    return {label: value, value: value};
  }
}

var newArray = manipulateArray(portArray);

这样newArray 将等于[{label:1, value:1}, {label:4, value:4}]。

您可能应该在这里阅读地图文档：MDN

【讨论】：

【解决方案3】：

您的代码缺少分隔对象属性的逗号：

{
  label: value, // <-- comma between properties
  value: value
}

此外，Array#map 将返回一个新数组，其中包含映射到可以存储在局部变量中的对象的值：

const portArray = [1,4];
const newArray = portArray.map(value =>({ label: value, value: value }));
            // remember this comma :) ----------------^

关于箭头函数的隐式与显式返回值的旁注：

箭头函数后面的对象字面量的括号，它们是必要的，以便函数的主体表达式被隐式返回。

在箭头函数中使用显式返回语句（注意在函数体周围添加了花括号）：

const newArray = portArray.map(value => {
  return {
    label: value,
    value: value 
  }
};

【讨论】：