React中如何在模态框正确展示Atlassian Jira Storage API的记录

核心错误点 #

• 没有存储选中记录的状态：你写的setData函数仅创建了两个局部变量，没有把选中的记录存入组件状态，且模态框中调用的record变量在对应作用域未定义，无法读取到对应值。
• 按钮重复绑定点击事件：同一个Button组件写了两个onClick属性，后定义的会覆盖前者，导致传入选中记录的逻辑完全没有执行。
• fetchData函数无返回值：你模拟的测试数据没有被return，导致useState初始化的records实际为undefined，会导致表格无法正常渲染。
• 组件顶层冗余调用fetchData：useState已经会执行初始化逻辑，额外在组件顶层调用fetchData属于冗余操作，每次组件重渲染都会重复执行。

修正后完整代码 #

//import ForgeUI, { render, Fragment,ModalDialog, Text, IssuePanel,Button, useState, Component, useEffect, Form, TextField, Heading, Table, Head, Row, Cell, rowsPerPage, Macro} from "@forge/ui";

const fetchData = async () => {
  // 实际对接Jira Storage API的逻辑可放开下方注释
  //const data = await storage.query().where('key', startsWith('my_keys')).getMany();
  //console.log(`display record data: ${data}`);
  //return data;

  // 模拟数据
  const records = [
    {
      fullname: 'James Cool',
      email: 'james@gmail.com',
    },
    {
      fullname: 'Richard More',
      email: 'richard@gmail.com',
    },
  ];
  return records;
};
 
const App = () => {
  const [records] = useState(fetchData);
  // 模态框相关状态
  const [isOpen, setOpen] = useState(false);
  // 存储当前选中的记录
  const [selectedRecord, setSelectedRecord] = useState(null);

  return (
    <Fragment>
      <Heading size="medium">Display Records</Heading>
          
      <Table>
        <Head>
          <Cell>
            <Text>Fullname</Text>
          </Cell>
          <Cell>
            <Text>Email</Text>
          </Cell>
          <Cell>
            <Text>Action</Text>
          </Cell>
        </Head>
        {records.map(record => (
          <Row key={record.email}>
            <Cell>
              <Text>{record.fullname}</Text>
            </Cell>
            <Cell>
              <Text>{record.email}</Text>
            </Cell>
            <Cell>
              <Button 
                text="View Records" 
                onClick={() => { 
                  setSelectedRecord(record); 
                  setOpen(true); 
                }} 
              />
            </Cell>
          </Row>
        ))}
      </Table>

      {isOpen && selectedRecord && (
        <ModalDialog header="" onClose={() => {
          setOpen(false);
          setSelectedRecord(null);
        }}>
          <Text>Display Records in Modal!</Text>
          Fullname: {selectedRecord.fullname}<br />
          Email: {selectedRecord.email}<br />

          <Text>Pass Records also in a Form</Text> 
          <TextField name="fullname" label="Your Fullname" defaultValue={selectedRecord.fullname}/>
          <TextField name="email" label="Your Email" defaultValue={selectedRecord.email}/>
        </ModalDialog>
      )}
    </Fragment>
  );
};

export const run = render(
  <Macro
    app={<App />}
  />
);

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