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

【问题标题】：React JS - passing info from object and array as props to child componentReact JS - 将来自对象和数组的信息作为道具传递给子组件
【发布时间】：2020-11-28 22:21:34
【问题描述】：

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

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

我还有一组颜色：

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

现在我想通过这个对象和数组进行映射，以创建带有这些信息作为道具的子组件。我想得到这样的东西：

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

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

【问题讨论】：

为什么不向对象添加颜色键而不是单独的数组？
@BlackMath 我从不同的来源获得对象和数组，这就是为什么它们是分开的

标签： javascript arrays reactjs object

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

 

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

【讨论】：

【解决方案3】：

您可以将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} />
        ))}
    </>
  )
}

【讨论】：

【解决方案4】：

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

【讨论】：