Извлекать данные только при первом переходе на вкладку в TabbedForm

У меня есть форма с вкладками, на которой вторая вкладка будет извлекать список из бэкэнда, аналогично официальной демонстрационной программе activ-admin (например, пост содержит много комментариев). Проблема в том, что когда я переключаю вкладку, всегда есть внутренний вызов для второй вкладки, которая является списком комментариев. Как мне избежать этого и просто загрузить один раз? Поскольку у меня есть пагинация на второй вкладке, если я переключаю вкладку, нумерация страниц будет изменена на первую страницу.

Заранее спасибо!

<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>

Ответы

Ответ 1

Если вы используете хуки, вы можете использовать комбинацию useState и useEffect. useState будет содержать результат вашей выборки данных, который вы будете запускать в useEffect. Чтобы это произошло только один раз, используйте пустой массив как массив зависимостей в useEffect:

const [data, setData] = useState(null)

useEffect(() => {
  setData(fetchData())
}, [])