如何在react-table-v6行中用多行映射单独的键值

Question

你好，我有一个数据数组:

my_tags = [
{
item: 1,
tags:   {name: 'LandingPage', value: 'true'},
{name: 'Country', value: 'GB'},
{name: 'Carrier', value: 'Evri'},
{name: 'EventCode', value: 'Dispatched'},
},
{
item: 2,
tags:   {name: 'LandingPage', value: 'true'},
{name: 'Country', value: 'USA'},
{name: 'Carrier', value: 'RoyalMail'},
{name: 'EventCode', value: 'Dispatched'},
}]

我有一个react-table-v6，并试图在每行标签[国家]。Value]和标签[carrier.value]。只是想有国家和运营商的名单。如何去做。

如何提问:

{
Header: 'Alert tags',
id: 'tags',
accessor: (data) => {
const res = data.tags.map(items => items.tags?.find(i => i?.name === 'Carrier').value);
console.log('res:', res);
},
}

但是在console.log中我有:

[undefined, undefined]  <<< HERE IS PROBLEM

但是我测试了如果我们这样做的话它是有效的。为什么它不能在react-table-v6中通过accessor:

const carriers = data3.map(item => {
return item.tags.find(tag => tag.name === 'Carrier').value
})
console.log(carriers) //[ 'RoyalMail', 'Evri']

或者我可以把所有的名字都放在这里例如

(accessor: item => (item.tags.map(i => i.name))

Answer 1

我解决了我的问题，怎样才能对别人有用。

{
Header: 'Alert tags',
id: 'tags',
accessor: (items) => {
const carrierName = items?.tags?.find(i => (i?.name === 'Carrier'));
const countryName = items?.tags?.find(i => (i?.name === 'Country'));
return [carrierName?.value, countryName?.value].map(i => (
i
? (
<span
key={i}
style={{
background: '#F5F5F5',
width: 'fit-content',
border: '1px solid #BEBEBE',
borderRadius: '3px',
padding: '5px',
margin: '0 5px 0 0',
textAlign: 'center',
overflow: 'hidden',
}}
>{i}
</span>
)
: ''
));
// console.log('res:', res);
},