11

I have a tabbed form that the second tab will retrieve a list from the backend, similar to the react-admin official demo (e.g. post has many comments). The problem is when I switch the tab, there is always a backend call for the second tab which is comment list. How can I avoid it and just load one time? Because I have pagination on the second tab, if I switch tab, the pagination will be changed to the first page.

Thank you in advance!

<TabbedForm>
    <FormTab label="Post">
        <TextInput source="name"/>
    </FormTab>

    <FormTab label="Comment">
        {/* This tab should fetch data only once if I switch tabs */}
        <ReferenceManyField
            pagination={<Pagination/>}
            reference="comments"
            target="id"
            perPage={5}
            addLabel={false}
        >
            <Datagrid>
                <TextField source="name" />
                <EditButton />
                <DeleteButton undoable={false}/>
            </Datagrid>
        </ReferenceManyField>
    </FormTab>
</TabbedForm>
sancho.s ReinstateMonicaCellio
  • 14,708
  • 20
  • 93
  • 185
sunfly
  • 191
  • 6
  • Can you show your logic for fetching the data? – goto Aug 10 '19 at 17:33
  • Not very sure if this can be implemented... Perhaps adding a counter, and only loading the data when that counter is 0 via conditional. https://joshblog.net/2018/conditional-rendering-with-react-and-jsx/ or https://github.com/marmelab/react-admin/issues/2548 perhaps help. – sancho.s ReinstateMonicaCellio Aug 11 '19 at 08:20

1 Answers1

1

If you are using Hooks, you could use a combination of useState and useEffect. useState would hold the result of your data-fetching, which you would trigger in useEffect. To make that happen just once, use an empty array as dependency-array in useEffect:

const [data, setData] = useState(null)

useEffect(() => {
  setData(fetchData())
}, [])
Michael
  • 91
  • 4
  • Can you describe a full code sample to make it works with the specific case of the TabbedForm? It seems pretty simple to award a bounty. – Kmaschta Aug 12 '19 at 08:39