如何自定义数据提供者请求调用？

Question

我是 React 和 React-admin 的新手。

我正在使用 jsonServerProvider（在我的 App.js 中，我有以下内容）：

import jsonServerProvider from 'ra-data-json-server';

我想创建自定义批量操作。在列表中，select 多个项目并单击一个按钮以 "connect" 它们。我尝试使用 UPDATE_MANY，但这会多次调用我的端点，因此不适合。理想情况下，我需要像这样调用我的端点的请求：url.to.myendpoint?ids=1,2,3 或什至更好地在正文中传递一组 ID 并使用 PUT 请求。

只是为了了解工作原理和调试网络调用，我还尝试了 GET_MANY，在 dataproviders 页面中，请求似乎获得了这样的 ID：{ ids: {mixed[]}, data: {Object} }

但是请求是这样发送到服务器的：url.to.myendpoint?id=1&id=2&id=3 在我的 python/flask 后端中解析起来不太好。

我花了很多时间阅读文档，例如：

我尝试了不同的方法，但无法达到我想要的效果。所以再次请帮助我使我的自定义批量按钮工作。

我的批量按钮名为 ConnectItemsButton，代码如下所示：

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Button, crudUpdateMany } from 'react-admin';
import { showNotification, GET_MANY } from 'react-admin';
import dataProvider from './dataProvider';

class ConnectItemsButton extends Component {
  handleClick = () => {
    const { selectedIds } = this.props;
    dataProvider(GET_MANY, 'items/connect', { ids: selectedIds })
      .then(() => {
        showNotification('Connected!');
      })
      .catch((e) => {
        showNotification('Error.', 'warning')
      });
  };

  render() {
    return (
      <Button label="Associate" onClick={this.handleClick} />
    );
  }
}

export default connect(undefined, { crudUpdateMany })(ConnectItemsButton);

请注意 ./dataProvider 的内容（它与 App.js 文件中使用的相同提供程序并传递给 props 中的 <Admin>）：

import jsonServerProvider from 'ra-data-json-server';
export default jsonServerProvider('http://127.0.0.1:5000/api');

在我创建的列表中，按钮显示正常，所以在这里分享代码片段：

const PostBulkActionButtons = props => (
  <Fragment>
    <ConnectItemsButton {...props} />
  </Fragment>
);

...

export const ItemsList = props => (
  <List {...props} bulkActionButtons={<PostBulkActionButtons />}>

...

在我的后端端点 items/connect 我只需要获取一个逗号分隔的 ID 列表来解析，就是这样。

一个简单的工作解决方案会很棒，或者至少为我指明了正确的方向。感谢您的帮助。

Answer 1

我的方法是使用 react-admin's dataActions。您的操作将是这样的：

crudCreate('items/connect', { selectedIds: selectedIds }, basePath , redirectUrl)

我建议使用自定义 dataProvider（例如，如果您使用 jsonDataProvider，在您看到 ra-data-json-server 的 App.js 导入中：如果您使用 WebStorm Ctrl + 单击在其上并将代码复制到 customJsonDataProvider.js 并修复最终警告，例如导入行应移至顶部）并将其作为道具传递给 Admin 组件。在您的 customJsonDataProvider 中，您将有一个 convertDataRequestToHTTP 或类似的东西，它管理 CRUD 操作和 returns 您要使用的 url 和 HTTP 方法。

您想要做的事情的一个例子是：

const convertDataRequestToHTTP = (type, resource, params) => {
let url = '';
const options = {};

switch (type) {
    ...
    case CREATE: {
      ...
      if (type === 'items/connect') {
        const { data: { selectedIds } } = params;
        url = `${apiUrl}?${selectedIds.reduce((acc, id) => `${acc};${id}`)}`
        options.method = 'GET';
      }
      ...
      break;
    }
    ...
}
return { url, options };

}

在您的 dataProvider.js 中，修改导入以使用您创建的自定义提供程序，例如：

import jsonServerProvider from './customJsonServer';

您 AssociateTradesButton.js 中的代码应该可以正常工作。

您可以找到创建您自己的文档 dataProvider here。

Answer 2

我认为使用 Promise.all 可以解决问题，请参阅此 link 以供参考 https://github.com/marmelab/react-admin/blob/master/packages/ra-data-simple-rest/src/index.js#L140

如何自定义数据提供者请求调用？

How to customize data provider request call?

reactjs

react-admin