如何在 AppBar 上设置配置显示/隐藏刷新按钮答案

【问题标题】：How to set config show/hide refresh button on AppBar如何在 AppBar 上设置配置显示/隐藏刷新按钮
【发布时间】：2018-09-10 06:38:35
【问题描述】：

Click to see image

AppBar 上的按钮刷新不会在页面仪表板上刷新，因为我只使用组件Card，但使用组件List 或Datagrid 在页面上工作，所以我想在@987654326 上配置显示/隐藏刷新按钮@ 或如何修复它适用于页面不使用组件 List 或 Datagrid。

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

【问题讨论】：

我不明白你的问题。你能详细说明你想做什么，你尝试了什么，你期待什么？
@Kmaschta 我修正了我的问题的细节，希望你能理解。
对不起，我还是不明白……你能用小句子回答以下问题：你想做什么？你在尝试什么？你在期待什么？当前的行为是什么？请向我们展示您正在使用的最多代码。
@Kmaschta 我在 repo react-admin 上的 example/demo 中测试运行项目。当我在页面仪表板页面上按下 AppBar 上的刷新按钮时，我在客户页面上按下 AppBar 上的刷新按钮刷新。我不知道为什么。那么如何在仪表板页面中使用刷新按钮或配置显示/隐藏刷新按钮
@Kmaschta 可以在页面右上角配置隐藏/显示刷新按钮，如果不是如何使其与不使用数据表列表的页面（即仪表板页面）一起工作跨度>

标签： react-admin

【解决方案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>;
}

【讨论】：

我们如何在基于函数的组件中使用 useEffect 钩子实现相同的功能
同时使用useVersion获取版本和useRefresh获取刷新功能