React JS - 将来自 object 的信息和数组作为道具传递给子组件

Question

我有一个看起来像这样的 object：

storeObjects = {
    furnitures: [{name: 'table', price: 50}, {name: 'chair', price: 20}],
    electronics: [{name: 'tv', price: 150}]
}

我还有一个 colors 数组：

['brown', 'yellow', 'green', 'red']

现在我想通过这个 object 和数组 map 和数组来创建以这些信息作为道具的子组件。 我想得到这样的东西：

<ChildComponent name = 'table' price = 50 color = 'brown' />
<ChildComponent name = 'chair' price = 20 color = 'brown' />
<ChildComponent name = 'tv' price = 150 color = 'yellow' />

我的观点是来自第一个键的元素将获得第一种颜色，来自第二个键的元素将获得第二种颜色，依此类推

Answer 1

let colors = ['brown', 'yellow', 'green', 'red']
Object.keys(storeObjects).map((key, index) => {
    storeObjects[key].map((obj) => {
        console.log(obj.name, obj.price, colors[index])
    })
})

Answer 2

您可以将map与索引一起使用

 storeObjects = { furnitures: [ { name: "table", price: 50 }, { name: "chair", price: 20 }, ], electronics: [{ name: "tv", price: 150 }], } colors = ["brown", "yellow", "green", "red"] const res = Object.keys(storeObjects).map((store, i) => storeObjects[store].map((item) => ({...item, color: colors[i], })) ).flat() console.log(res)

const Example = () => {
  storeObjects = {
    furnitures: [
      { name: "table", price: 50 },
      { name: "chair", price: 20 },
    ],
    electronics: [{ name: "tv", price: 150 }],
  }

  colors = ["brown", "yellow", "green", "red"]

  return (
    <>
      {Object.keys(storeObjects)
        .map((store, i) =>
          storeObjects[store].map((item) => ({
            ...item,
            color: colors[i],
          }))
        )
        .flat()
        .map(({ name, price, color }) => (
          <ChildComponent name={name} price={price} color={color} />
        ))}
    </>
  )
}

Answer 3

先遍历 'storeObjects' 的键，然后遍历该键的 arrays。

 let storeObjects = { furnitures: [{name: 'table', price: 50}, {name: 'chair', price: 20}], electronics: [{name: 'tv', price: 150}] } let colors = ['brown', 'yellow', 'green', 'red']; let newStoreObj = {}; let index =0; for (key in storeObjects) { newStoreObj[key] = storeObjects[key]; for(let i=0;i<newStoreObj[key].length;i++) { newStoreObj[key][i]["color"] = colors[index]; } index++; } for(key in newStoreObj){ for(let i=0;i<newStoreObj[key].length;i++) { console.log(newStoreObj[key][i]); } }

Answer 4

const colors = ['brown', 'yellow', 'green', 'red'];
const storeObjects = {
    furnitures: [{name: 'table', price: 50}, {name: 'chair', price: 20}],
    electronics: [{name: 'tv', price: 150}]
}

function serializeObj(storeObjects, colors) {
  return Object.keys(storeObjects)
    .map(item => storeObjects[item])
    .reduce((acc, cur, index) => {
      if (Array.isArray(cur)) {
        cur.map(obj => obj.color = colors[index])
        return acc.concat(cur)
      } else {
        return acc.push(cur)
      }
    }, [])
}

// run function
serializeObj(storeObjects, colors)
// you get result 
// [{name: "table", price: 50, color: "brown"}, {name: "chair", price: 20, color: "brown"}, {name: "tv", price: 150, color: "yellow"}]
// then you map the result obj and get the virtual dom