我使用react Js，我有一个对象列表，第一个对象与第二个对象具有数组相同的元素

Question

我这里有一个对象列表

const List_objects = [
{ 
Product = A,
Price = 20
},
{
Product = B,
Price = 21
}
]

我有一个带有

的person_data

const [person_data,setPerson_Data] = useState({
Product : 0,
Price = :0
})

我在这里有一个onClick函数

const handleClick = e => {
setPerson_Data({
Product: String(List_objects.map(e=>e.Product)),
Price : String(List_objects.map(e=>e.Price))
})

，当我通过console.log打印时，这将是结果

{
Product: A,B,
Price : 20,21
}

而我想反过来写

从这些

{
Product: A,B,
Price : 20,21
}

到这些

[
{ 
Product = A,
Price = 20
},
{
Product = B,
Price = 21
}
]

我是ComEng三年级的学生，我正在使用React JS开发一个在线库存系统，它将对我的学校特别是我作为有抱负的开发人员的职业生涯有很大的帮助

你们知道怎么执行吗?或者如果有样例代码

，也可以使用其他方法。提前谢谢你!

Answer 1

这里有两种可能的方法从它创建数组。一个使用Generator，另一个使用map()。

const input = {
Product: "A,B",
Price: "20,21",
};
function* fromObjectGenerator(obj) {
const products = obj.Product.split(",");
const prices = obj.Price.split(",");
for (let i = 0; i < products.length; i++) {
yield {
Product: products[i],
Price: prices[i],
};
}
}
function fromObject(obj) {
const products = obj.Product.split(",");
const prices = obj.Price.split(",");
return [...Array(products.length)].map((_, idx) => ({
Product: products[idx],
Price: prices[idx],
}));
}
console.log([...fromObjectGenerator(input)]);
console.log(fromObject(input));

请注意:两个实现都假设products的数量与prices的数量相匹配，但是如果不是这样的话，它也可以进行小的调整。