Question

我有两种状态：

stateOne: [
  'marca01',
  'marca02'
]

stateTwo: [
 {
   PRODUCTO:'hat',
   PRICE:1499,
   CATEGORY:'Men'
 },
 {
   PRODUCTO:'Shirt',
   PRICE:1233,
   CATEGORY:'Woman'
 }
]

我正在使用lodash在第三个状态下合并这两个对象，但是如您所见，第一个状态是一个数组，第二个状态是一个对象数组，因此我无法像我想要的那样合并这两个对象。

类似这样的东西：

stateThree: [
 {
   PRODUCTO:'hat',
   PRICE:1499,
   CATEGORY:'Men',
   MARK:'marca01'
 },
 {
   PRODUCTO:'Shirt',
   PRICE:1233,
   CATEGORY:'Woman',
   MARK:'marca02'
 }
]

如何获得所需的结果（不必使用lodash）

Answer 1

您可以遍历第二个数组，然后添加属性。

let s1 = [
  'marca01',
  'marca02'
]
let s2 = [
 {
   PRODUCTO:'hat',
   PRICE:1499,
   CATEGORY:'Men'
 },
 {
   PRODUCTO:'Shirt',
   PRICE:1233,
   CATEGORY:'Woman'
 }]

s2.forEach((x,i) => x.MARK = s1[i])
console.log(s2)

Answer 2

您可以这样做：

stateThree = stateTwo.map( (element, i) => ({...element, MARK: stateOne[i] } ))

Answer 3

不带破折号：

const state3 = state2.map((product, index) => ({
    ...product,
    MARK: state1[index]
}));

这里.map返回一个新数组，其新值由匿名函数返回。

散布运算符...product将新对象中的先前对象属性展平。可以用Object.assign替换此语法糖。

然后，我们基于具有相同索引的其他状态添加新的MARK属性。

我使用了map方法和散布运算符，以防止状态突变对React有害。

React如何合并一个数组和一个对象数组

3 个答案: