仅在第一次获取数据时转到 TabbedForm 中的选项卡

Posted 2023-02-22

【中文标题】仅在第一次获取数据时转到 TabbedForm 中的选项卡

【英文标题】：Fetch data only the first time go to a Tab in a TabbedForm

【发布时间】：2019-12-06 09:07:51

【问题描述】：

我有一个选项卡式表单，第二个选项卡将从后端检索列表，类似于react-admin official demo（例如，post 有很多 cmets）。问题是当我切换选项卡时，总是有第二个选项卡的后端调用，即评论列表。 我怎样才能避免它并只加载一次？ 因为我在第二个标签页有分页，所以如果我切换标签页，分页会变成第一页。

提前谢谢你！

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

【问题讨论】：

你能展示你获取数据的逻辑吗？

不太确定这是否可以实现...也许添加一个计数器，并且仅在该计数器为 0 时通过条件加载数据。 joshblog.net/2018/conditional-rendering-with-react-and-jsx 或 github.com/marmelab/react-admin/issues/2548 或许有帮助。

【参考方案1】：

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

const [data, setData] = useState(null)

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

【讨论】：

您能否描述一个完整的代码示例以使其适用于 TabbedForm 的特定情况？奖励赏金似乎很简单。