Блог

Использование пользовательского dataprovider, доступного из руководств, где я также добавил пользовательский запрос данных, который мы можем назвать «fetchData», который просто запрашивает данные у определенной конечной точки.
Он работает с интерфейсом администратора по умолчанию, но не работает с указанной ошибкой в пользовательском интерфейсе администратора.

Подробнее:

 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 с открытым исходным кодом.

Как и ожидалось, значение параметров равно «неопределенному».

Код моего dataprovider: https://pastebin.com/VMrhdSTB
Но имейте в виду — это из учебника с небольшими изменениями.

Как мне использовать этот dataprovider:

 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;
  

Это известная ошибка в react-admin 3.10.0, которая уже исправлена в master. Исправление будет выпущено в версии 3.10.1 (запланировано на сегодня).

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