在 React 中传播对象答案

【问题标题】：Spread for an object in React在 React 中传播对象
【发布时间】：2020-02-06 15:28:49
【问题描述】：

我有一个对象数组，我希望它成为一个可以去{ 44: "autoTest", 94: "autoTest", ...}的对象

[
  0: {
    id: 1, 
    name: "test", 
    description: "a description"
  }, 
  1: {
    id: 2, 
    name: "test 2", 
    description: "a description french baguette"
  }
]

会变成

{
  1: "test", 
  2: "test2"
}

到目前为止，我的代码带有一些 console.log() ：

const { options } = this.state;
console.log(options); // […] 0: Object { id: 44, name: "autoTest", description: "test uniUpdate", … } 1: Object { id: 94, name: "autoTest", description: "test uni", … }
let obj2 = {};
if (options.length > 0) {
  options.map((item, key) => {
    const id = item.id;
    const name = item.name;
    let obj1 = { [id]: name };
    console.log(obj1); // Object { 44: "autoTest" } for example
    obj2 = { ...obj1 };
  });
  console.log(obj2); // Object { 16: "Test 3" } is called like two times and is obviously not what I expected
}

一些提示？

【问题讨论】：

我想你想使用forEach 甚至reduce
obj2 = {...obj2, ...obj1}
obj2 = Object.assign(obj2, obj1)
为什么要这个对象而不是数组？
@YannickK 可能是因为 ID 不一定是连续的。

标签： javascript reactjs spread

【解决方案1】：

我将使用名为forEach 的数组方法循环遍历数组中的每个值（在本例中为对象）

const arr = [{id: 1, name: "test", description: "a description"}, {id: 2, name: "test 2", description: "a description french baguette"}]

const newObj = {}

arr.forEach(item => newObj[item.id] = item.name)
// console.log(newObj) >>>>>> {1: "test", 2: "test 2"}

我觉得这是不言自明的。如果有任何不清楚的地方，请告诉我。

【讨论】：

【解决方案2】：

可以用map和Object.fromEntries或reduce来简化：

var arr = [ { id: 1, name: "test"  , description: "a description" }, 
            { id: 2, name: "test 2", description: "a description french baguette" } ]

var obj1 = Object.fromEntries(arr.map(o => [o.id, o.name]))

var obj2 = arr.reduce((o, v) => (o[v.id] = v.name, o), {})

console.log( obj1 )
console.log( obj2 )

【讨论】：

【解决方案3】：

这不需要那么复杂。您可以使用reduce() 来简化它：

const data = [
  {
    id: 1, 
    name: "test", 
    description: "a description"
  }, 
  {
    id: 2, 
    name: "test 2", 
    description: "a description french baguette"
  }
]

const result = data.reduce((a, { id, name }) => ({ ...a, [id]: name }), {});
console.log(result);

【讨论】：

【解决方案4】：

正如我所说，您应该使用forEach 甚至reduce 函数。

let arr = [{id: 1, name: "test", description: "a description"}, {id: 2, name: "test 2", description: "a description french baguette"}],
    result = arr.reduce((a, {id, name}) => Object.assign(a, {[id]: name}), Object.create(null));

console.log(result);

【讨论】：

【解决方案5】：

使用 forEach() 和扩展运算符的更简单方法：

const data = [
  {
    id: 1, 
    name: "test", 
    description: "a description"
  }, 
  {
    id: 2, 
    name: "test 2", 
    description: "a description french baguette"
  }
];

let output = {};
data.forEach((item) => {output = {...output, [item.id]: item.name};});

输出：{ 1: "test", 2: "test 2" }

【讨论】：