下面的代码成功显示了来自Atlassian Jira API的记录，并且运行良好。
这是我的问题:
我想只显示属于创建者的记录创建者id 100xx.
也就是说，我想显示
值的记录search_creator_idcreatator_id在记录
下面是我到目前为止的编码成果
//import goes here
const fetchData = async () => {
// make api call
//const data = await storage.query().where('key', startsWith('my_keys')).getMany();
//console.log(`display record data: ${data}`);
//return data;
//or
const search_creator_id = '100xx';
const records = [
{
fullname: 'James Cool',
email: 'james@gmail.com',
creator_id: '100xx'
},
{
fullname: 'Richard More',
email: 'richard@gmail.com',
creator_id: '200xx'
},
fullname: 'Ann Carrots',
email: 'ann@gmail.com',
creator_id: '100xx'
},
];
};
const App = () => {
const [ records ] = useState(fetchData);
fetchData();
return (
<Fragment>
<Heading size="medium">Display Records owned by 100xx</Heading>
<Table>
<Head>
<Cell>
<Text>Fullname</Text>
</Cell>
<Cell>
<Text>Email</Text>
</Cell>
<Cell>
<Text>owCreator</Text>
</Cell>
</Head>
{records.map(record => (
<Row>
<Cell>
<Text>{record.fullname}</Text>
</Cell>
<Cell>
<Text>{record.email}</Text>
</Cell>
<Cell>
<Text>{record.creator_id}</Text>
</Cell>
</Row>
))}
</Table>
</Fragment>
);
};
export const run = render(
<Macro
app={<App />}
/>
);
可以使用三元运算符:
{records.map(record => {
record.creator_id === search_creator_id ?
(<Row>
<Cell>
<Text>{record.fullname}</Text>
</Cell>
<Cell>
<Text>{record.email}</Text>
</Cell>
<Cell>
<Text>{record.creator_id}</Text>
</Cell>
</Row>)
: null
}
))}
只需要在html中以这种方式过滤records:
...
{records.filter(x => x.creator_id === search_creator_id).map(record => (
<Row>
<Cell>
<Text>{record.fullname}</Text>
</Cell>
<Cell>
<Text>{record.email}</Text>
</Cell>
<Cell>
<Text>{record.creator_id}</Text>
</Cell>
</Row>
))}
...
使用filter过滤结果。所以试试这个:
{records.filter((x) => x.creator_id == search_creator_id).map(record => (
<Row>
<Cell>
<Text>{record.fullname}</Text>
</Cell>
<Cell>
<Text>{record.email}</Text>
</Cell>
<Cell>
<Text>{record.creator_id}</Text>
</Cell>
</Row>
))}