如何在 AppBar 上设置配置 show/hide 刷新按钮

Question

Click to see image

AppBar 上的按钮刷新不会在页面仪表板上刷新，因为我只使用组件 Card 但在页面上使用组件 List 或 Datagrid，所以我想要在 AppBar 上配置 show/hide 刷新按钮或如何修复它适用于不使用组件 List 或 Datagrid.

的页面

对不起，我的英语不太好。

Answer 1

您必须从 react-admin 状态获取一些数据才能使其工作。实际上，刷新按钮只会触发 refreshView 操作，该操作会更新 react-admin redux 状态的 state.admin.ui.viewVersion 键。这个键是一个简单的计数器。在内部，我们使用这个计数器来检查我们是否必须更新一些组件数据。这是一个连接的 Dashboard 的简单示例，它可以在刷新时执行操作：

import React, { Component } from "react";
import { connect } from "react-redux";

class Dashboard extends Component {
  componentDidMount() {
    this.doOnMountAndWhenRefreshed();
  }

  componentDidUpdate(prevProps) {
    if (prevProps.views !== this.props.views) {
      this.doOnMountAndWhenRefreshed();
    }
  }

  doOnMountAndWhenRefreshed = () => {
    // This is where you do update your component:
    // - Make API requests
    // - Fetch data from the react-admin store, etc.
  };

  render() {
    const { views } = this.props;
    return <div>Refreshed {views} times.</div>;
  }
}

const mapStateToProps = state => ({ views: state.admin.ui.viewVersion });

export default connect(
  mapStateToProps,
  {}
)(Dashboard);

你可以看到它在这个 codesandbox

中工作

编辑更新版本的 react-admin

import { useVersion } from 'react-admin';

const Dashboard = () => {
    const version = useVersion();
    return <div>Refreshed {version} times.</div>;
}

Answer 2

在 react-admin 4.x 中，我设法得到了这样的期望行为：

import React from 'react'
import { useQuery } from 'react-query'

const noop = async () => new Date().valueOf()

export const MyDashboard = () => {
  const { data } = useQuery('myDashboard', noop)

  return (
    <div>Last refreshed at {data}</div>
  )
}

export default MyDashboard

请注意 data 如何表示 noop() 返回的值。

这样，每当用户按下 AppBar 中的刷新图标时，组件就是 re-rendered。

如何在 AppBar 上设置配置 show/hide 刷新按钮

How to set config show/hide refresh button on AppBar

react-admin