仅在第一次访问数据时才进入TabbedForm中的Tab

Question

我有一个选项卡式表单，第二个选项卡将从后端检索列表，类似于react-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>

Answer 1

如果您使用 Hooks，则可以结合使用 useState 和 useEffect。useState 将保存数据获取的结果，您将在 useEffect 中触发该结果。为了使这种情况只发生一次，请在 useEffect 中使用一个空数组作为依赖数组：

const [data, setData] = useState(null)

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