首页 > 解决方案 > React 管理员在自定义数据提供程序上抛出“无法将未定义转换为对象”

问题描述

使用教程中提供的自定义数据提供程序,我还添加了一个自定义数据请求,我们可以称之为“fetchData”,它只是向某个端点询问数据。
它适用于默认管理界面,但在自定义管理 UI 上出现上述错误而失败。

更多细节:

TypeError: can't convert undefined to object

isDataProviderOptions
node_modules/ra-core/esm/dataProvider/getDataProviderCallArguments.js:19

  16 | ];
  17 | var isDataProviderOptions = function (value) {
  18 |     var options = value;
> 19 |     return Object.keys(options).some(function (key) { return OptionsProperties.includes(key); });
  20 | };
  21 | // As all dataProvider methods do not have the same signature, we must differentiate
  22 | // standard methods which have the (resource, params, options) signature

我想它需要一些“选项”。到目前为止,我试图从给定的 dataprovider 开源示例中添加它们,但没有成功。

正如预期的那样,选项的值是“未定义的”。

我的数据提供者的代码:https
://pastebin.com/VMrhdSTB 但请注意 - 它来自教程,几乎没有修改。

+++

如何使用此数据提供者:

import { number } from 'prop-types';
import * as React from 'react';
import { useEffect, useState } from 'react';
import { AdminContext, AdminUI, Resource, ListGuesser, useDataProvider } from 'react-admin';

import DataProvider from './dataprovider';

function App() {
    return (
        <AdminContext dataProvider={DataProvider}>
            <AsyncResources />
        </AdminContext>
    );
}

function AsyncResources() {
    const [state, setState] = useState({
      stations_info: {
        data: [
          {
            id: number,
            ip: "",
            name: "",
            port: number
          }
        ],
        total: number
      }
    });
    const dataProvider = useDataProvider();

    useEffect(() => {
        dataProvider.fetchStations().then(
          stations_info => {
            setState(
                state => ({...state, stations_info })
            )
        }
        
        )}, []);

    const StationResources = () => {
      const { data, total } = state.stations_info;
 
      let render_items = []
  
      for (var item of data) {
          render_items.push(<Resource
            name={item.name}
            key={item.key}
            list={ListGuesser}
          />)
      }
  
      return (
              <div>
                  {render_items.map(item => item)}
              </div>
      )
    }

    return (
        <AdminUI>
            { StationResources }
        </AdminUI>
    );
}

export default App;

标签: javascriptreactjstypescriptreact-admin

解决方案


这是 react-admin 3.10.0 中的一个已知错误,已在 master 中修复。该修复程序将在版本 3.10.1 中发布(预定今天)。

https://github.com/marmelab/react-admin/pull/5524


推荐阅读