Reactjs 基于API调用将获取的资源添加到knownresources

我正在尝试根据API调用添加资源。我可以添加没有问题的knownResources，也可以自己添加fetchedResources，但是我不能将两者结合起来

这些文档显示了如何根据API查询的权限显示资源，但没有详细说明如果未声明资源，如何动态添加资源：

如果两者结合（如下所示），CoreAdminRouter将抛出一个错误：
TypeError:child.props未定义

如果您有任何关于如何解决问题的想法，我们将不胜感激！代码如下：

import 'babel-polyfill';
import React from 'react';
import { Admin, Resource } from 'react-admin';
import { restClient } from 'ra-data-feathers';
import { Route } from 'react-router-dom'; 
import feathersClient from './feathersClient'; 
import englishMessages from 'ra-language-english';

// import customRoutes from './customRoutes';
import { createBrowserHistory as createHistory } from 'history';

import createRealtimeSaga from "./createRealtimeSaga";

import { Contacts } from './services/contacts';
import { Group, GroupMember } from './services/groups';
import { Albums, Photos, PublicPhotosList } from './services/photos';



import UserIcon from '@material-ui/icons/AccountCircle';
import GroupIcon from '@material-ui/icons/Group';
import GroupIcon from '@material-ui/icons/GroupWork';
import StarIcon from '@material-ui/icons/StarRate';
import FolderSpecialIcon from '@material-ui/icons/FolderSpecial';


const authClientOptions = {
    storageKey: 'feathers-jwt',
    authenticate: { strategy: 'local' }
};

const history = createHistory();

const options = {
    usePatch: false, // Use PATCH instead of PUT for UPDATE requests. Optional.
    contacts: { // Options for individual resources can be set by adding an object with the same name. Optional.
        id: 'ContactId' // If this specific table uses an id field other than 'id'. Optional.
    },
    group: { // Options for individual resources can be set by adding an object with the same name. Optional.
        id: 'GroupId' // If this specific table uses an id field other than 'id'. Optional.
    },
    groupmember: { // Options for individual resources can be set by adding an object with the same name. Optional.
        id: 'GroupMemberID' // If this specific table uses an id field other than 'id'. Optional.
    },
    albums: { // Options for individual resources can be set by adding an object with the same name. Optional.
        id: 'AlbumId' // If this specific table uses an id field other than 'id'. Optional.
    },
    photos: { // Options for individual resources can be set by adding an object with the same name. Optional.
        id: 'PhotoId' // If this specific table uses an id field other than 'id'. Optional.
    }, 
    "photos/albums/1/": { // Options for individual resources can be set by adding an object with the same name. Optional.
        id: 'AlbumId' // If this specific table uses an id field other than 'id'. Optional.
    },
    "photos/albums/2/": { // Options for individual resources can be set by adding an object with the same name. Optional.
        id: 'AlbumId' // If this specific table uses an id field other than 'id'. Optional.
    },


}


const dataProvider = restClient(feathersClient, options)

const realTimeSaga = createRealtimeSaga(dataProvider);

const messages = {
    en: englishMessages,
}
const i18nProvider = locale => messages[locale];

const knownResources = [

    <Resource name="contacts" list={ContactsList} show={ContactsShow}  icon={UserIcon} />,
    <Resource name="group"  list={GroupList} show={GroupShow} icon={GroupIcon}/>,
    <Resource name="groupmember"  list={GroupMemberList} show={GroupMemberShow} icon={GroupIcon}/>,
    <Resource name="albums"  list={AlbumList} show={AlbumsShow} icon={GroupIcon}/>,
    <Resource name="photos"  list={PhotoList} show={PhotosShow} icon={GroupIcon}/>,

    //******************************************************************
    //**These resources need to be dynamically Added based on API Call**
    //******************************************************************
    // <Resource name="photos/albums/1/" list={PublicPhotosList} icon={StarIcon}/>,
    // <Resource name="photos/albums/2/" list={PublicPhotosList} icon={StarIcon}/>,
    // <Resource name="photos/albums/3/" list={PublicPhotosList} icon={StarIcon}/>,
    // etc.


];


// const fetchResources = permissions =>
//     fetch('https://myapi/resources', {
//         method: 'POST',
//         headers: {
//             'Content-Type': 'application/json'
//         },
//         body: JSON.stringify(permissions),
//     })
//     .then(response => response.json())
//     .then(json => knownResources.filter(resource => json.resources.includes(resource.props.name)));

const fetchResources = () => 
    fetch('https://jsonplaceholder.typicode.com/albums/hasphotos/true?$limit=10')
    .then(function(response){return response.json()})
    .catch(error => console.error('Error:', error))
    .then(function(schemas){
        var filtered = schemas.data
        // console.log(schema.data)
        return filtered.map((schema, index)=>{
            let name = 'photos/album/'+schema.AlbumId

            options[name] = {
                    id: 'AlbumId'
            }

            var resource;

            if(schema.Results.length!==0){

                resource = <Resource  
                name={'photos/albums/'+schema.AlbumId}
                list={PublicPhotosList}
                options = {{
                    label:schema.AlbumName
                }}/>;


                knownResources.push(resource);
                console.log(knownResources)
            }
            return knownResources
        })
    })
    .catch(error => console.error('Error:', error))


const App = () => (
    <Admin 
        // authProvider={authClient(feathersClient, authClientOptions)}
        restClient={restClient(feathersClient, options)}
        dataProvider={restClient(feathersClient, options)}
        customSagas={[realTimeSaga]}
        locale="en"
        i18nProvider={i18nProvider}
        // customRoutes={customRoutes}
        history={history}
        // theme={theme} 
    >
         //{knownResources}
        {fetchResources} 
    </Admin>

);

export default App;

导入“babel polyfill”；
从“React”导入React；
从“react Admin”导入{Admin，Resource}；
从“ra数据”导入{restClient}；
从'react router dom'导入{Route}；
从“/FeatherClient”导入FeatherClient；
从“ra语言英语”导入英语信息；
//从“/customRoutes”导入customRoutes；
从“历史”导入{createBrowserHistory as createHistory}；
从“/createRealtimeSaga”导入createRealtimeSaga；
从“./services/Contacts”导入{Contacts}；
从“./services/groups”导入{Group，GroupMember}；
从“/services/Photos”导入{相册、照片、PublicPhotosList}；
从“@material ui/icons/AccountCircle”导入用户图标；
从“@material ui/icons/Group”导入GroupIcon；
从“@material ui/icons/GroupWork”导入GroupIcon；
从“@material ui/icons/starate”导入StarIcon；
从“@material ui/icons/FolderSpecial”导入FolderSpecialIcon；
常量authClientOptions={
storageKey:'feathers jwt'，
身份验证：{策略：'本地'}
};
const history=createHistory（）；
常量选项={
usePatch:false，//对更新请求使用PATCH而不是PUT。可选。
联系人：{//可以通过添加同名对象来设置单个资源的选项。可选。
id:'ContactId'//如果此特定表使用的id字段不是'id'。可选。
},
组：{//可以通过添加同名对象来设置单个资源的选项。可选。
id:'GroupId'//如果此特定表使用的id字段不是'id'。可选。
},
groupmember:{//可以通过添加同名对象来设置单个资源的选项。可选。
id:'GroupMemberID'//如果此特定表使用的id字段不是'id'。可选。
},
相册：{//可以通过添加同名对象来设置单个资源的选项。可选。
id:'AlbumId'//如果此特定表使用的id字段不是'id'。可选。
},
照片：{//可以通过添加同名对象来设置单个资源的选项。可选。
id:'PhotoId'//如果此特定表使用的id字段不是'id'。可选。
}, 
“photos/albums/1/”：{//可以通过添加同名对象来设置单个资源的选项。可选。
id:'AlbumId'//如果此特定表使用的id字段不是'id'。可选。
},
“photos/albums/2/”：{//可以通过添加同名对象来设置单个资源的选项。可选。
id:'AlbumId'//如果此特定表使用的id字段不是'id'。可选。
},
}
const dataProvider=restClient（FeatherClient，选项）
const realTimeSaga=createRealtimeSaga（数据提供者）；
常量消息={
英语短文，
}
const i18nProvider=locale=>messages[locale]；
常数知识资源=[
,
,
,
,
,
//******************************************************************
//**需要根据API调用动态添加这些资源**
//******************************************************************
// ,
// ,
// ,
//等等。
];
//const fetchResources=权限=>
//取（'https://myapi/resources', {
//方法：“POST”，
//标题：{
//“内容类型”：“应用程序/json”
//         },
//正文：JSON.stringify（权限），
//     })
//.then（response=>response.json（））
//.then（json=>knownResources.filter（resource=>json.resources.includes（resource.props.name））；
常量fetchResources=（）=>
取（'https://jsonplaceholder.typicode.com/albums/hasphotos/true?$limit=10'）
.then（函数（响应）{return response.json（）}）
.catch（error=>console.error（'error:'，error））
.then（函数（模式）{
var filtered=schemas.data
//console.log（schema.data）
返回筛选的.map（（架构，索引）=>{
let name='photos/album/'+schema.AlbumId
选项[名称]={
id:'AlbumId'
}
var资源；
if（schema.Results.length！==0）{
资源=；
知识资源。推送（资源）；
控制台日志（knownResources）
}
返回知识资源
})
})
.catch（error=>console.error（'error:'，error））
常量应用=（）=>(
//{knownResources}
{fetchResources}
);
导出默认应用程序；

问题似乎是由return语句的放置位置引起的。这是可行的——它获取数据，然后根据返回的内容创建资源

const fetchResources = async ( ) => {


let response = await fetch('https://jsonplaceholder.typicode.com/albums/hasphotos/true?$limit=10');
let schemas = await response.json();

var filtered = schemas.data.filter(a=>a.Results.length);

filtered.map(schema => {
    let name = 'photos/album/'+schema.AlbumId


    var resource = <Resource
    key='AlbumId'
    name={'photos/album/'+schema.AlbumId}
    list={PublicPhotosList}
    options = {{
        label:schema.Album
    }}
/>;
    options[name] = {
        id: 'AlbumId'
}
    knownResources.push(resource)
    return;

    }
); 

 console.log(knownResources)
 return knownResources;
};

const fetchResources=async（）=>{
let response=等待取数（'https://jsonplaceholder.typicode.com/albums/hasphotos/true?$limit=10’；
让schemas=wait response.json（）；
var filtered=schemas.data.filter（a=>a.Results.length）；
filtered.map（模式=>{
let name='photos/album/'+schema.AlbumId
var资源=；
选项[名称]={
id:'AlbumId'
}
知识资源推送（资源）
返回；
}
); 
控制台日志（knownResources）
归还知识资源；
};

问题似乎是由return语句的放置位置引起的。这是可行的——它获取数据，然后根据返回的内容创建资源

const fetchResources = async ( ) => {


let response = await fetch('https://jsonplaceholder.typicode.com/albums/hasphotos/true?$limit=10');
let schemas = await response.json();

var filtered = schemas.data.filter(a=>a.Results.length);

filtered.map(schema => {
    let name = 'photos/album/'+schema.AlbumId


    var resource = <Resource
    key='AlbumId'
    name={'photos/album/'+schema.AlbumId}
    list={PublicPhotosList}
    options = {{
        label:schema.Album
    }}
/>;
    options[name] = {
        id: 'AlbumId'
}
    knownResources.push(resource)
    return;

    }
); 

 console.log(knownResources)
 return knownResources;
};

const fetchResources=async（）=>{
乐