如何访问对象数组中的两个单独的图像，并将其分配给同一数组中的第三个对象？

Question

我正在使用模拟数据创建卡组件，有些卡具有单个图像，而另一些则具有并排比较图像。 我创建了一个上传数组，前两个对象都有一个image ，而对于第三个对象，我需要访问第一个和第二个对象中的图像以形成comparisons对象。 我该如何实现？ 我添加了一些有用的评论。

import faker from 'faker';
import uuid from 'uuid/v1';

const fakeUploads = [
    {
        avatar: faker.image.avatar(),
        description: faker.lorem.sentences(),
        id: uuid(),
        image: faker.image.avatar(),       
    },
    {
        avatar: faker.image.avatar(),
        description: faker.lorem.sentences(),
        id: uuid(),
        image: faker.image.avatar(),
        name: faker.name.findName(),        
    },
    {
        avatar: faker.image.avatar(),
        comparisons: { // Object.keys(comparison) => [0, 1]
            //Access to the two images in the above object where `0` is the index of the first image and `1` is the indes of the second

        },
        description: faker.lorem.sentences(),
        id: uuid(),
        name: faker.name.findName(),        
    },
];

我已经映射了模拟上传的值，所以在我的组件中我想要类似

values.includes(comparisons)? 
<span>
 <img width="50%" alt={UPLOAD} src={comparisons.image[0]} />
 <img width="50%" alt={UPLOAD} src={comparisons.image[1]} />
</span> : <img alt={UPLOAD} src={image} /> 

Answer 1

您可以通过将第三个对象添加到作用域数组中来实现。

import faker from 'faker';
import uuid from 'uuid/v1';

const fakeUploads = [
    {
        avatar: faker.image.avatar(),
        description: faker.lorem.sentences(),
        id: uuid(),
        image: faker.image.avatar(),       
    },
    {
        avatar: faker.image.avatar(),
        description: faker.lorem.sentences(),
        id: uuid(),
        image: faker.image.avatar(),
        name: faker.name.findName(),        
    }
]

fakeUploads.push({
        avatar: faker.image.avatar(),
        comparisons: {[fakeUploads[0].image, fakeUploads[1].image]},
        description: faker.lorem.sentences(),
        id: uuid(),
        name: faker.name.findName(),
})

那是您要找的东西吗？