如何禁用 react-admin 的自动刷新功能答案

【问题标题】：How can i disable the auto-refreshing feature of react-admin如何禁用 react-admin 的自动刷新功能
【发布时间】：2020-10-20 18:29:33
【问题描述】：

所以 react-admin 似乎有一个功能，如果您空闲了一会儿然后回来，它会重新加载数据，大概是为了确保您正在查看最新版本的记录。

这导致我的具有一些自定义组件的编辑功能出现问题。有没有办法禁用此自动重新加载功能？

【问题讨论】：

标签： javascript reactjs react-admin

【解决方案1】：

自动刷新由加载指示器（您在应用栏右上角看到的微调器图标）触发。

您可以通过自己替换加载指示器来禁用自动刷新。

import * as React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { useSelector } from 'react-redux';
import { makeStyles } from '@material-ui/core/styles';
import CircularProgress from '@material-ui/core/CircularProgress';
import { useRefreshWhenVisible, RefreshIconButton } from 'react-admin';

const useStyles = makeStyles(
    {
        loader: {
            margin: 14,
        },
        loadedIcon: {},
    },
    { name: 'RaLoadingIndicator' }
);

const LoadingIndicator = props => {
    const { classes: classesOverride, className, ...rest } = props;
    useRefreshWhenVisible(); // <= comment this line to disable auto-refresh
    const loading = useSelector(state => state.admin.loading > 0);
    const classes = useStyles(props);
    return loading ? (
        <CircularProgress
            className={classNames('app-loader', classes.loader, className)}
            color="inherit"
            size={18}
            thickness={5}
            {...rest}
        />
    ) : (
        <RefreshIconButton className={classes.loadedIcon} />
    );
};

LoadingIndicator.propTypes = {
    classes: PropTypes.object,
    className: PropTypes.string,
    width: PropTypes.string,
};

export default LoadingIndicator;

您还需要将此按钮放在自定义 AppBar 中，将您的 AppBar 注入自定义布局中，并在您的管理员中使用该布局，如 the react-admin Theming documentation 中所述。

【讨论】：

我明白了。纵观 repo 上的许多问题，似乎有一些希望使自动刷新可配置，以便看到它何时被优先排序。同时，我将使用 SimpleForm 而不是 rff
元素...看起来内的似乎可以告诉库避免自动刷新。感谢您为 Francois 项目所做的所有辛勤工作，使用起来很愉快；尤其是有了新的 TS 支持！

【解决方案2】：

我能够通过从react-admin 调度setAutomaticRefresh 操作来关闭自动刷新：

import { setAutomaticRefresh } from 'react-admin';
import { useDispatch } from 'react-redux';

// inside component
const dispatch = useDispatch();
dispatch(setAutomaticRefresh(false))

此操作已添加到 here 作为版本 3.8.2 的一部分。

【讨论】：