javascript - 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;
解决方案
这是 react-admin 3.10.0 中的一个已知错误,已在 master 中修复。该修复程序将在版本 3.10.1 中发布(预定今天)。
推荐阅读
- javascript - 为什么 javascript on change 功能无法识别 javascript 生成的输入?
- react-native - 如何在 iOS 和 Android 中检查 react-native 应用程序的大小
- mysql - MySQL SUM 与 SELECT
- multithreading - 数组同步和多线程
- sql - Postgres LEFT JOIN 不返回空值?
- ruby-on-rails - 在carrierwave中为default_url图像分配一个版本
- php - 如何解决 Instagram mgp25 API 中所需的挑战?
- javascript - 函数中的事件侦听器存储在变量中
- php - 是否可以分页下一个和上一个链接以在特定 div 加载页面
- angularjs - 从使用 $http 服务的空响应中获取 HTTP 状态代码