如何在管理员中刷新列表视图
How to refresh a List View in admin on rest
我正在尝试获取列表以在成功执行自定义操作后刷新。
我在休息教程中使用了管理员的 saga
function * actionApproveSuccess () {
yield put(showNotification('Executed'))
yield put(push('/comments'))
// does not refresh, because the route does not change
// react-redux-router also has no refresh() method, like react-router has...
}
我的另一个想法是以某种方式触发列表组件的刷新操作,但我不知道如何访问它或如何将它连接到 ACTION_SUCCESS 事件。
无法通过 React 路由器刷新路由,那是 known problem. Admin-on-rest's List
component has its own refresh mechanism,但没有提供 API。
我的建议是使用基于 admin-on-rest 的自定义 <List>
组件。如果您找到公开 refresh
操作的方法,请随时在 aor 存储库上打开 PR!
绝对是 hacky,但解决方法可能是:
push('/comments/1') //any path to change the current route
push('/comments') //the path to refresh, which is now a new route
我已经通过操作面板用小技巧解决了这个任务。我确定这不是正确的解决方案,但在某些情况下它可以提供帮助:
class RefreshButton extends FlatButton {
componentDidMount() {
if (this.props.refreshInterval) {
this.interval = setInterval(() => {
this.props.refresh(new Event('refresh'))
}, this.props.refreshInterval)
}
}
componentWillUnmount() {
clearInterval(this.interval)
}
}
const StreamActions = ({ resource, filters, displayedFilters, filterValues, basePath, showFilter, refresh }) => (
<CardActions>
{filters && React.cloneElement(filters, { resource, showFilter, displayedFilters, filterValues, context: 'button' }) }
<RefreshButton primary label="Refresh streams" onClick={refresh} refreshInterval={15000} refresh={refresh} icon={<NavigationRefresh />} />
</CardActions>
);
export default class StreamsListPage extends Component {
render() {
return (
<List
{...this.props}
perPage={20}
actions={<StreamActions />}
filter={{ active: true }}
title='Active Streams'>
<StreamsList />
</List>
)
}
}
@Danila Smirnov 上面的回答在我现在使用时显示了这条消息:
Deprecation warning: The preferred way to refresh the List view is to connect your custom button with redux and dispatch the refreshView action.
现在点击刷新按钮本身也不起作用。
这是我在我的工作中得到的调整版本。
编辑:对其进行了更多修改以使其可重复使用。
RefreshListActions.js
import React, { Component } from 'react'
import FlatButton from 'material-ui/FlatButton'
import { CardActions } from 'material-ui/Card'
import NavigationRefresh from 'material-ui/svg-icons/navigation/refresh'
import { connect } from 'react-redux'
import { REFRESH_VIEW } from 'admin-on-rest/src/actions/uiActions'
import { refreshView as refreshViewAction } from 'admin-on-rest/src/actions/uiActions'
class MyRefresh extends Component {
componentDidMount() {
const { refreshInterval, refreshView } = this.props
if (refreshInterval) {
this.interval = setInterval(() => {
refreshView()
}, refreshInterval)
}
}
componentWillUnmount() {
clearInterval(this.interval)
}
render() {
const { label, refreshView, icon } = this.props;
return (
<FlatButton
primary
label={label}
onClick={refreshView}
icon={icon}
/>
);
}
}
const RefreshButton = connect(null, { refreshView: refreshViewAction })(MyRefresh)
const RefreshListActions = ({ resource, filters, displayedFilters, filterValues, basePath, showFilter, refreshInterval }) => (
<CardActions>
{filters && React.cloneElement(filters, { resource, showFilter, displayedFilters, filterValues, context: 'button' }) }
<RefreshButton primary label="Refresh" refreshInterval={refreshInterval} icon={<NavigationRefresh />} />
</CardActions>
);
export default RefreshListActions
在我经常刷新的列表中:
import RefreshListActions from './RefreshListActions'
export default (props) => (
<List {...props}
actions={<RefreshListActions refreshInterval="10000" />}
>
<Datagrid>
...
</Datagrid>
</List>
)
通过 redux 使用 refreshView 操作效果很好。
查看示例....
import { refreshView as refreshViewAction } from 'admin-on-rest';
import { connect } from 'react-redux';
class MyReactComponent extends Component {
//... etc etc standard react stuff...
doSomething() {
// etc etc do smt then trigger refreshView like below
this.props.refreshView();
}
render() {
return <div>etc etc your stuff</div>
}
}
export default connect(undefined, { refreshView: refreshViewAction })(
MyReactComponent
);
push
只是 AOR 的重定向,它似乎对我也不起作用。 guleryuz 发布的内容对我来说是正确的。这是我在他的例子的基础上所做的:
// Import Statement
import { refreshView as refreshViewAction } from 'admin-on-rest';
class RemoveButton extends Component {
handleClick = () => {
const { refreshView, record, showNotification } = this.props;
fetch(`http://localhost:33333/api/v1/batch/stage/${record.id}`, { method: 'DELETE' })
.then(() => {
showNotification('Removed domain from current stage');
refreshView();
})
.catch((e) => {
console.error(e);
showNotification('Error: could not find domain');
});
}
render() {
return <FlatButton secondary label="Delete" icon={<DeleteIcon />}onClick={this.handleClick} />;
}
}
这些位也很重要:
RemoveButton.propTypes = {
record: PropTypes.object,
showNotification: PropTypes.func,
refreshView: PropTypes.func,
};
export default connect(null, {
showNotification: showNotificationAction,
refreshView: refreshViewAction,
})(RemoveButton);
所以它的工作方式是使用 AOR 的 refreshViewAction
作为道具功能。这使用底层调用为我填充数据网格,即 GET_LIST
。这可能不适用于您的特定用例。如果您有任何问题,请告诉我。
解决方案对我来说就像一个魅力,我的看起来有点不同
yield put(push('/comments/-1')); // This refreshes the data
yield put(showNotification('')); // Hide error
我正在尝试获取列表以在成功执行自定义操作后刷新。
我在休息教程中使用了管理员的 saga
function * actionApproveSuccess () {
yield put(showNotification('Executed'))
yield put(push('/comments'))
// does not refresh, because the route does not change
// react-redux-router also has no refresh() method, like react-router has...
}
我的另一个想法是以某种方式触发列表组件的刷新操作,但我不知道如何访问它或如何将它连接到 ACTION_SUCCESS 事件。
无法通过 React 路由器刷新路由,那是 known problem. Admin-on-rest's List
component has its own refresh mechanism,但没有提供 API。
我的建议是使用基于 admin-on-rest 的自定义 <List>
组件。如果您找到公开 refresh
操作的方法,请随时在 aor 存储库上打开 PR!
绝对是 hacky,但解决方法可能是:
push('/comments/1') //any path to change the current route
push('/comments') //the path to refresh, which is now a new route
我已经通过操作面板用小技巧解决了这个任务。我确定这不是正确的解决方案,但在某些情况下它可以提供帮助:
class RefreshButton extends FlatButton {
componentDidMount() {
if (this.props.refreshInterval) {
this.interval = setInterval(() => {
this.props.refresh(new Event('refresh'))
}, this.props.refreshInterval)
}
}
componentWillUnmount() {
clearInterval(this.interval)
}
}
const StreamActions = ({ resource, filters, displayedFilters, filterValues, basePath, showFilter, refresh }) => (
<CardActions>
{filters && React.cloneElement(filters, { resource, showFilter, displayedFilters, filterValues, context: 'button' }) }
<RefreshButton primary label="Refresh streams" onClick={refresh} refreshInterval={15000} refresh={refresh} icon={<NavigationRefresh />} />
</CardActions>
);
export default class StreamsListPage extends Component {
render() {
return (
<List
{...this.props}
perPage={20}
actions={<StreamActions />}
filter={{ active: true }}
title='Active Streams'>
<StreamsList />
</List>
)
}
}
@Danila Smirnov 上面的回答在我现在使用时显示了这条消息:
Deprecation warning: The preferred way to refresh the List view is to connect your custom button with redux and dispatch the refreshView action.
现在点击刷新按钮本身也不起作用。
这是我在我的工作中得到的调整版本。
编辑:对其进行了更多修改以使其可重复使用。
RefreshListActions.js
import React, { Component } from 'react'
import FlatButton from 'material-ui/FlatButton'
import { CardActions } from 'material-ui/Card'
import NavigationRefresh from 'material-ui/svg-icons/navigation/refresh'
import { connect } from 'react-redux'
import { REFRESH_VIEW } from 'admin-on-rest/src/actions/uiActions'
import { refreshView as refreshViewAction } from 'admin-on-rest/src/actions/uiActions'
class MyRefresh extends Component {
componentDidMount() {
const { refreshInterval, refreshView } = this.props
if (refreshInterval) {
this.interval = setInterval(() => {
refreshView()
}, refreshInterval)
}
}
componentWillUnmount() {
clearInterval(this.interval)
}
render() {
const { label, refreshView, icon } = this.props;
return (
<FlatButton
primary
label={label}
onClick={refreshView}
icon={icon}
/>
);
}
}
const RefreshButton = connect(null, { refreshView: refreshViewAction })(MyRefresh)
const RefreshListActions = ({ resource, filters, displayedFilters, filterValues, basePath, showFilter, refreshInterval }) => (
<CardActions>
{filters && React.cloneElement(filters, { resource, showFilter, displayedFilters, filterValues, context: 'button' }) }
<RefreshButton primary label="Refresh" refreshInterval={refreshInterval} icon={<NavigationRefresh />} />
</CardActions>
);
export default RefreshListActions
在我经常刷新的列表中:
import RefreshListActions from './RefreshListActions'
export default (props) => (
<List {...props}
actions={<RefreshListActions refreshInterval="10000" />}
>
<Datagrid>
...
</Datagrid>
</List>
)
通过 redux 使用 refreshView 操作效果很好。
查看示例....
import { refreshView as refreshViewAction } from 'admin-on-rest';
import { connect } from 'react-redux';
class MyReactComponent extends Component {
//... etc etc standard react stuff...
doSomething() {
// etc etc do smt then trigger refreshView like below
this.props.refreshView();
}
render() {
return <div>etc etc your stuff</div>
}
}
export default connect(undefined, { refreshView: refreshViewAction })(
MyReactComponent
);
push
只是 AOR 的重定向,它似乎对我也不起作用。 guleryuz 发布的内容对我来说是正确的。这是我在他的例子的基础上所做的:
// Import Statement
import { refreshView as refreshViewAction } from 'admin-on-rest';
class RemoveButton extends Component {
handleClick = () => {
const { refreshView, record, showNotification } = this.props;
fetch(`http://localhost:33333/api/v1/batch/stage/${record.id}`, { method: 'DELETE' })
.then(() => {
showNotification('Removed domain from current stage');
refreshView();
})
.catch((e) => {
console.error(e);
showNotification('Error: could not find domain');
});
}
render() {
return <FlatButton secondary label="Delete" icon={<DeleteIcon />}onClick={this.handleClick} />;
}
}
这些位也很重要:
RemoveButton.propTypes = {
record: PropTypes.object,
showNotification: PropTypes.func,
refreshView: PropTypes.func,
};
export default connect(null, {
showNotification: showNotificationAction,
refreshView: refreshViewAction,
})(RemoveButton);
所以它的工作方式是使用 AOR 的 refreshViewAction
作为道具功能。这使用底层调用为我填充数据网格,即 GET_LIST
。这可能不适用于您的特定用例。如果您有任何问题,请告诉我。
yield put(push('/comments/-1')); // This refreshes the data
yield put(showNotification('')); // Hide error