React-admin 在列表中创建对话框

Question

Is it ever possible to create a the folowing scenario with react-admin?

• Render items with List+Datagrid
• Render also a button in each row
• User clicks button
• Show a dialog with another List+Datagrid from another resource

In my implementation, when button is first clicked, it correctly opens dialog and renders answers . However if I change sorting or go to next page, it also affects the data grid that renders questions .

The reason is I guess when I apply sorting etc in the answers list, it changes query string in the browser, and it effects questions too.

Relevant line: https://github.com/marmelab/react-admin/blob/eb3c1acbf4ecc81793b8e790e11a6f84f9bdbc1b/packages/ra-core/src/controller/useListController.ts#L133

Is it possible to have two data grid in same page? (With different resources and sorting context etc).

My impl:

// render a dialog that contains answer for each questions
const ShowAnwersButton  = (props) => {
  const [open, setOpen] = React.useState(false);
  return (
    <>
      <Dialog open={open} onClose={() => setOpen(false)}>
        <List
          resource="answers"
          basePath="/answers"
          filter={{ question_id: props.record.id }}
        >
          <MyDataGrid>
            <TextField source="id" />
            <DateField source="created_at" />
            <TextField source="name" />
          </MyDataGrid>
        </List>
      </Dialog>
      <Button
        variant={open ? "contained" : "outlined"}
        color="primary"
        onClick={(e) => setOpen(true)}
      >
        Answers
      </Button>
    </>
  );
};

// questions
export const QuestionsList = (props) => (
  <List {...props}>
    <Datagrid>
      <TextField source="id"/>
      <DateTime source="created_at" disabled />
      <BooleanField source="disabled" />
      <ShowAnwersButton source="dummy" />
    </EditableDatagrid>
  </List>
);

Answer 1

You can have two Datagrids in the same page, but not two Lists. In react-admin, the sorting, filtering and pagination of a List use the URL as state, so there can be only one List per route.

For your use case, you'll have to call the dataProvider.getList() manually, put the results in a <ListContext> , and then you can use a second <Datagrid> inside it. It requires knowledge of public but undocumented react-admin APIs. You should be prepared to dig in the react-admin source code for inspiration:

• useListController
• useReferenceManyFieldController
• List
• ListContext