Блог

Я пытаюсь реализовать модуль react-admin. Прохождение 30-минутного урока, который у них есть на веб-странице. Но он продолжает ошибаться с этим сообщением об ошибке

 Error: React.Children.only expected to receive a single React element child.
 

Я следую пошаговому руководству, чтобы код был похож на то, что доступно на их домашней странице.

Вот мой компонент приложения

 import * as React from "react";
import { Admin, Resource } from 'react-admin';
import { PostList } from './posts';
import jsonServerProvider from 'ra-data-json-server';
import { UserList } from './users';

const dataProvider = jsonServerProvider('https://jsonplaceholder.typicode.com');

const App = () => {
    return (
        <Admin dataProvider={dataProvider}>
            <Resource name="posts" list={PostList} />   
            <Resource name="users" list={UserList} />    
        </Admin>
    )
}


export default App;
 

Когда я запустил приложение create-react, в компоненте индекса был React.Strictmode. Я где-то читал, что это может быть проблемой, поэтому я удалил строгий режим, и мой компонент индекса теперь выглядит так

 import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
    <App />,
  document.getElementById('root')
);
 

Кто-нибудь знает, как решить эту проблему?

Вот как выглядит компонент «Другие мои посты»

 import * as React from "react";
import {
    List,
    Datagrid,
    TextField,
    ReferenceField,
    EditButton,
    Edit,
    Create,
    SimpleForm,
    ReferenceInput,
    SelectInput,
    TextInput,
} from 'react-admin';

export const PostList = props => (
    <div>
        <List {...props}>
        <Datagrid>
            <TextField source="id" />
            <ReferenceField source="userId" reference="users">
                <TextField source="name" />
            </ReferenceField>
-           <TextField source="id" />
            <TextField source="title" />
-           <TextField source="body" />
            <EditButton />
        </Datagrid>
    </List> 
    </div>   
    )


    export const PostEdit = props => (
        <Edit {...props}>
            <SimpleForm>
                <TextInput disabled source="id" />
                <ReferenceInput source="userId" reference="users">
                     <SelectInput optionText="name" />
                </ReferenceInput>
                <TextInput source="title" />
                <TextInput multiline source="body" />
            </SimpleForm>
        </Edit>
    );

  export const PostCreate = props => (
        <Create {...props}>
            <SimpleForm>
                <ReferenceInput source="userId" reference="users">
                    <SelectInput optionText="name" />
                </ReferenceInput>
                <TextInput source="title" />
                <TextInput multiline source="body" />
            </SimpleForm>
        </Create>
    );