ReferenceManyField uncaught at handleFetch TypeError: payload.data.map is not a function

Question

I try to implement datagrid in tabbed form admin-on-rest

I see request to api looks good:

/api/v1/projectRounds?_end=25&_order=DESC&_sort=id&_start=0&projectId=505

If I try response:

[{"id":13,"projectId":505,"createdAt":"2017-11-17T00:24:34.000Z"}]

In console I have error:

Uncaught TypeError: Cannot read property 'data' of undefined at oneToMany.js:47

try response:

{"data":[{"id":13,"projectId":505,"createdAt":"2017-11-17T00:24:34.000Z"}],"total":1}

Having:

uncaught at handleFetch TypeError: payload.data.map is not a function at ./node_modules/admin-on-rest/lib/reducer/admin/references/oneToMany.js.exports.default

I give code from admin-on-rest example: https://github.com/marmelab/admin-on-rest-demo/blob/a67978a6f69e7dfbb937f66baaa49e787e5853ec/src/visitors/index.js#L82-L93

My code looks like:

<FormTab label="Project rounds">
    <ReferenceManyField reference="projectRounds" target="projectId" addLabel={false}>
        <Datagrid>
            <TextField source="id" />
        </Datagrid>
     </ReferenceManyField>
 </FormTab>

Rest client:

const httpClient = (url, options = {}) => {
    if (!options.headers) {
        options.headers = new Headers({ Accept: 'application/json' });
    }
    const token = localStorage.getItem('token');
    options.headers.set('Authorization', `${token}`);
    return fetchUtils.fetchJson(url, options);
}

const restClient = jsonServerRestClient(process.env.REACT_APP_API_URL, httpClient);
const App = () => (
    <Admin restClient={restClient} authClient={authClient}>
        <Resource name="projects" list={ProjectList} edit={ProjectEdit} create={ProjectCreate} />
        <Resource name="monitors" list={MonitorList} icon={MonitorIcon}/>
    </Admin>
);

Environment:

Admin-on-rest version: 1.3.3

React version: 16.2.0

Could you help me with correct api response or configuring REST client?

score 3 · Answer 1 · answered Dec 21 '17 at 18:46

So I found problem need check if you reference request added in resources in src/App.js:

const App = () => (
    <Admin restClient={jsonServerRestClient('http://jsonplaceholder.typicode.com')}>
        <Resource name="posts" list={PostList} create={PostCreate} edit={PostEdit} show={PostShow} remove={Delete} icon={PostIcon} />
        <Resource name="users" list={UserList} />
        <Resource name="comments" list={CommentList} create={CommentCreate} edit={CommentEdit} remove={Delete} icon={CommentIcon} />
        <Resource name="projectRounds" />
    </Admin>
);

on my example like this

<Resource name="projectRounds" />

now working good

It's a good point. This Resource adds a new item to the menu. Do you know, How to can I don't show in the menu and hide it? — Ali Hesari, May 12 '18 at 15:57

score 0 · Answer 2 · answered Dec 21 '17 at 16:38

0

Including links to your local development server isn't helpful.

Have you tried running JSON.parse() on the payload data before mapping it?

answered Dec 21 '17 at 16:38

Reid Plumlee

23
4

Removing link to local, sorry. I tried JSON.parse() and have error: Unexpected token o in JSON at position 1 – l0ne Dec 21 '17 at 17:32

ReferenceManyField uncaught at handleFetch TypeError: payload.data.map is not a function

2 Answers2