防止 react-admin 在每次更新后重定向到第一页？

Question

我使用 react-admin 创建了一个应用程序，其中包含许多页面的示例列表，然后我运行它。如果我打开列表中的另一个页面并选择编辑一行或删除它，任务完成但列表被重定向到第一页，这对用户体验不利。如果用户想要查看多行并对其进行编辑，这将迫使他每次进行编辑时 return 到该页面。我不确定这是一个如何提问的问题，还是应该在 github 中发布的错误或功能。我在多个 react-admin 版本 3.6.0、3.5.5、3.0.0 中对其进行了测试，并且出现了相同的行为。

// in src/App.js
import * as React from "react";
import { Admin, Resource } from "react-admin";
import jsonServerProvider from "ra-data-json-server";
import CommentList from "./comments";

const dataProvider = jsonServerProvider("https://jsonplaceholder.typicode.com");
const App = () => (
  <Admin dataProvider={dataProvider}>
    <Resource name="comments" list={CommentList} />
  </Admin>
);

export default App;

import * as React from "react";
import {
  List,
  Datagrid,
  TextField,
  ReferenceField,
  EmailField
} from "react-admin";
import { Fragment } from "react";
import { BulkDeleteButton } from "react-admin";
import ResetViewsButton from "./ResetViewsButton";

const PostBulkActionButtons = props => (
  <Fragment>
    <ResetViewsButton label="Reset Views" {...props} />
    {/* default bulk delete action */}
    <BulkDeleteButton {...props} />
  </Fragment>
);

const CommentList = props => (
  <List {...props} bulkActionButtons={<PostBulkActionButtons />}>
    <Datagrid rowClick="edit">
      <ReferenceField source="postId" reference="posts">
        <TextField source="id" />
      </ReferenceField>
      <TextField source="id" />
      <TextField source="name" />
      <EmailField source="email" />
      <TextField source="body" />
    </Datagrid>
  </List>
);

export default CommentList;

import * as React from "react";
import { Button, useUpdateMany, useNotify, useUnselectAll } from "react-admin";
import { VisibilityOff } from "@material-ui/icons";

const ResetViewsButton = props => {
  const notify = useNotify();
  const unselectAll = useUnselectAll();
  console.log(props.selectedIds);
  console.log(props.basePath);
  const [updateMany, { loading }] = useUpdateMany(
    "comments",
    props.selectedIds,
    { emails: "" },
    {
      onSuccess: () => {
        notify("comments updated");
        unselectAll("comments");
      },
      onFailure: error => notify("Error: comments not updated", "warning")
    }
  );

  return (
    <Button
      label="simple.action.resetViews"
      disabled={loading}
      onClick={updateMany}
    >
      <VisibilityOff />
    </Button>
  );
};

export default ResetViewsButton;

Answer 1

如果我没有误会你的话，你可以使用 "useRedirect"。您想在编辑信息后重定向。

import { useRedirect } from 'react-admin';

  const ResetViewsButton = props => {
  const notify = useNotify();
  const redirectTo = useRedirect();
  const unselectAll = useUnselectAll();
  console.log(props.selectedIds);
  console.log(props.basePath);
  const [updateMany, { loading }] = useUpdateMany(
    "comments",
    props.selectedIds,
    { emails: "" },
    {
      onSuccess: () => {
        notify("comments updated");
        unselectAll("comments");
        redirectTo('/url');
      },
      onFailure: error => notify("Error: comments not updated", "warning")
    }
  );

  return (
    <Button
      label="simple.action.resetViews"
      disabled={loading}
      onClick={updateMany}
    >
      <VisibilityOff />
    </Button>
  );
};

export default ResetViewsButton;

Answer 2

这是一个错误。等待版本 3.6.1

防止 react-admin 在每次更新后重定向到第一页？

Prevent react-admin from redirect to first page after each update?

react-admin