Reactjs 如何自定义数据提供程序请求调用？

我是一个新的反应和反应管理员

我正在使用

jsonServerProvider

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

我想创建一个自定义批量操作。在列表中，选择多个项目并单击按钮“连接”它们。我尝试过多次使用UPDATE_，但这多次调用了我的端点，因此不适合。理想情况下，我需要这样的请求来调用我的端点：url.to.myendpoint？ids=1,2,3或者更好地在主体中传递一个id数组并使用PUT请求

为了了解如何工作和调试网络调用，我还尝试了GET_MANY，在页面中，请求似乎获得了如下ID：

{id:{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);

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

在我创建的列表中，按钮正确显示，因此我在这里分享代码片段：

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

...

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

...

const PostBulkActionButtons=props=>(
);
...
export const ItemsList=props=>(
...

在我的后端端点

items/connect

中，我只需要得到一个以逗号分隔的ID列表来解析，就是这样

---

一个简单可行的解决方案会非常棒，或者至少为我指明了正确的方向。谢谢你的帮助。

我的方法是使用。你的操作如下：

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);

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

我建议使用自定义的

数据提供程序

（例如，如果你使用

jsonDataProvider

，在你的

App.js

导入中，你会看到

ra数据json服务器

：如果你使用WebStorm Ctrl+点击它并复制代码，例如复制到

customJsonDataProvider.js

，并修复最终的警告，例如导入行应该移到顶部）并将其作为道具传递给

管理员
组件。在
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
中的代码应该可以正常工作

您可以找到创建自己的
数据提供程序的文档
我认为使用Promise.all可以解决问题，请参阅此链接以供参考
谢谢。自定义数据提供程序您的意思是在
开关中
我还必须重新执行我已经使用的所有其他操作，如GetList、GetOne、Update等。或者我可以只执行以下操作吗跳过它们，它们就会按原样工作？请参阅docu章节“编写您自己的数据提供程序”：这就是编写自定义提供程序的意思吗？在docu中，用法看起来不同，不是
crudCreate
，而是
dataProvider（创建，…
也许你能说得更具体一些吗？导入并将customProvider传递给管理员的代码片段会有所帮助，我是react的noob。谢谢。另外，我在文档中没有找到关于
convertDataRequestToHTTP
的任何地方，你能与这样一个示例共享一个链接吗？我在谷歌上搜索了，我找到的唯一示例是：Wri仅为我需要执行的一个调用调用调用自定义数据提供程序对我来说似乎是一种过火的行为。如果有办法保持现状（我已经有了CRUD功能，我很满意）只要用最少的代码添加一个动作就好了。嗨，我知道这看起来有点让人不知所措，但实际上非常简单。在你的
/src
文件夹中，你只需添加一个
dataProvider.js
文件，然后将其导入你的
App.js
并将其作为道具传递给管理组件（
）的react admin文档。也看一看。嗨@firepol，如果这个解决方案对你有帮助，你能把它标记为答案吗？好的，但是我会编辑你的答案，这样如果一个noob登陆这里，他会立即明白该怎么做，因为它不是100%的noob友好。我没有创建一个自定义的提供者，而是复制了我正在使用的提供者（
jsonDataProvider
到
customJsonServer.js
）；摆脱了不需要的类型（GET、GET_LIST等），调整了您的建议（我做了不同的事情，保留了“POST”方法并在请求体中发送了ID—这更优雅—并且只将我的
dataProvider.js
文件修改为
import jsonServerProvider from./customJsonServer'；
我的其余代码保留原样.Thx@Deb作为答案，因此如果我理解你的意思，我建议复制
ra data simple rest/src/index.js
，然后，在第140行之后修改，例如更新\许多或在那里创建我自己的自定义操作？如果我创建了一些新的东西，例如称为<代码>连接\项目
，我可以将其添加到顶部导入的项目中吗？或者我应该使用额外的If检查，例如<代码>If（type===更新\许多和${resource}==='项目/连接'）
（或类似）？