Я столкнулся с проблемой при попытке реализовать условный рендеринг. Вот контекст:

Данные:

groups_a : [
             {id:1} ,
             {id:2}
            ]

groups_b : [
             {id:1} ,
             {id:3}
            ]

Условие:

Я хочу проверить каждый элемент в groups_b, существуют ли они в groups_a. Так что в этом случае условие должно возвращаться обратно true, потому что groups_b имеет id:1, как и groups_a

JSX:

            {###the condition ##
                         ?
            <Button>Approve</Button>   
            :
            null
            } 
2
neowenshun 1 Июн 2020 в 12:16

3 ответа

Лучший ответ

Вы можете сделать это, предполагая, что groupA / groupB будет массивом объектов

const groupA = [{id:1}, {id:3}, {id:4}];
const groupB = [{id:1}, {id:3}];

const boolean = groupB.every(obj => groupA.find(aObj => obj.id === aObj.id));
console.log('Method 1:', boolean)
// this will be true if every object in B is included in A

// If these are extremely large arrays you can improve performance by converting groupA into obj, and then checking by that object

const groupAHashMap = groupA.reduce((acc, cur) => ({...acc, [cur.id]: true}), {});
const boolean2 = groupB.every(obj => groupAHashMap[obj.id]);
console.log('Method 2:', boolean2)
4
Hamid Shoja 1 Июн 2020 в 14:53

Это другое решение, которое вы можете получить общий список также.

const groupA = [{id:1}, {id:3}, {id:4}];
const groupB = [{id:1}, {id:2}];



const ListCommon = groupA.filter(x => groupB.find(y => x.id === y.id));

console.log('result:', ListCommon.length>0)
console.log('List:', ListCommon)
0
Hamid Shoja 1 Июн 2020 в 14:41

Оформить заказ

function App(){ 

    const groupA = [{id:1}, {id:2}];
    const groupB = [{id:1}, {id:3}];

    const gourpAIds = groupA.map(item => item.id);

    return groupB.map(item => {
        if(gourpAIds.includes(item.id)){
            return <Button>Approve</Button>   ;
        }else{
            return null;
        }
    });

}
0
Ali 1 Июн 2020 в 09:27