Question

我是新来的反应和反应管理员。

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

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

我想创建一个自定义的批量操作。在列表中，选择许多项目，然后单击按钮以“连接”它们。我尝试使用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，则在App.js导入中看到ra-data-json-server的地方：如果使用WebStorm Ctrl +单击它并将代码复制到customJsonDataProvider.js并修复最终的警告，例如导入行应移至顶部），并将其作为道具传递给Admin组件。在您的customJsonDataProvider中，您将有一个convertDataRequestToHTTP或类似名称，用于管理CRUD操作并返回您要使用的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可以解决此问题，请参阅此链接以获取参考https://github.com/marmelab/react-admin/blob/master/packages/ra-data-simple-rest/src/index.js#L140

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

2 个答案: