Admin-on-rest, Edit Page - Incorrect Element Error

问题

I'm using admin-on-rest in my frontend side. But when I click Edit button in the list page, it orients to Edit page successfully but there is always an error like "INCORRECT ELEMENT". Do you know why?

Thank you

enter image description here

App.js

import { DataTypeList } from './Components/DataType/DataTypeList';
import { FeatureList } from './Components/FeatureList';
import { DataPointTypeList } from './Components/DataPointTypeList';
import DashBoard from './Components/DashBoard';
import { DataTypeCreate } from './Components/DataType/DataTypeCreate';
import { DataTypeEdit } from './Components/DataType/DataTypeEdit';

const httpClient = (url, options = {}) => {
    if (!options.headers) {
        options.headers = new Headers({ Accept: 'application/json' });
    }

    // add your own headers here
    options.headers.set('X-Custom-Header', 'foobar');
    return fetchUtils.fetchJson(url, options);
}
const restClient = jsonServerRestClient('http://localhost:3001/designer', httpClient);

const App = () => (
    // <Admin title="GAMMA" dashboard={DashBoard} restClient={jsonServerRestClient('https://arcane-citadel-28609.herokuapp.com/designer')}>
    <Admin title="GAMMA" dashboard={DashBoard} restClient={restClient}>
        <Resource name="datatypes" list={DataTypeList} create={DataTypeCreate} edit={DataTypeEdit} />
        <Resource name="features" list={FeatureList} />
        <Resource name="datapointtypes" list={DataPointTypeList} />
    </Admin>
);

export default App;

DataTypeEdit.js

import React from 'react';
import { Create, Edit, SimpleForm, TextInput } from 'admin-on-rest';
import { DataTypeActions } from '../Actions/DataTypeActions';
import { DataTypeEditActions } from '../Actions/DataTypeEditActions';

export const DataTypeEdit = (props) => (
    <Edit title="Data Type - EDIT" actions={<DataTypeEditActions /> {...props}>
        <SimpleForm>
            <TextInput source="id" label="Name"/>
        </SimpleForm>
    </Edit>
);

DataTypeEditActions.js

import React from 'react';
import { CardActions } from 'material-ui/Card';
import FlatButton from 'material-ui/FlatButton';
import { DeleteButton, ListButton, RefreshButton, ShowButton, Edit } from 'admin-on-rest';

const cardActionStyle = {
    zIndex: 2,
    display: 'inline-block',
    float: 'right',
};

export const DataTypeEditActions = ({ basePath, data }) => (
    <CardActions style={cardActionStyle}>
        <ListButton basePath={basePath} />
        <DeleteButton basePath={basePath} record={data} />
        <RefreshButton />
    </CardActions>
)

回答1:

The problem is your json data, try to return { "id": "1", "name": "test", "type": "test" }, not a array.

回答2:

This error also appears if result's id doesn't match requested one.

来源：https://stackoverflow.com/questions/50373222/admin-on-rest-edit-page-incorrect-element-error

标签

reactjs

admin-on-rest