React中如何正确匹配并展示Jira API返回的指定创建者ID对应记录

实现逻辑说明 #

• 先修复原有代码的基础问题：原示例中records数组第三个元素缺少左大括号，fetchData没有返回值，且异步请求不能直接同步传入useState初始化，需要配合useEffect调用后更新状态
• 筛选逻辑通过Array.filter()方法实现，匹配creator_id与目标ID一致的记录即可，你可以选择在数据获取阶段提前筛选，也可以选择在渲染前实时筛选

修正后的完整代码 #

//import goes here
import { useState, useEffect, Fragment } from 'react'
// 其余组件（Heading/Table等）导入省略

// 筛选条件提为全局常量方便后续修改
const SEARCH_CREATOR_ID = '100xx';

const fetchData = async () => {
  // 实际调用Jira API的逻辑保留即可
  // const data = await storage.query().where('key', startsWith('my_keys')).getMany();
  
  // 模拟接口返回的原始数据
  const originRecords = [
    {
      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'
    },
  ];
  // 方案1：数据获取阶段直接筛选，减少后续重复计算
  return originRecords.filter(record => record.creator_id === SEARCH_CREATOR_ID);
};
 
const App = () => {
  const [records, setRecords] = useState([]);

  // 异步请求放在useEffect中调用，避免重复渲染触发重复请求
  useEffect(() => {
    const getFilteredRecords = async () => {
      const filteredData = await fetchData();
      setRecords(filteredData);
    }
    getFilteredRecords();
  }, []);

  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>
        {/* 方案2：如果需要保留原始数据不提前筛选，也可以在渲染前过滤，把下面的records.map替换为下方代码即可
        {records.filter(record => record.creator_id === SEARCH_CREATOR_ID).map((record, index) => ( */}
        {records.map((record, index) => (
          {/* 循环加key避免react渲染报错，有唯一业务ID时建议替换index为业务ID */}
          <Row key={index}>
            <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 />}
  />
);

内容的提问来源于stack exchange，提问作者Nancy Moore