React-admin 给出错误“错误：React.Children.only 期望接收单个 React 元素子元素”

编程问答 2022-09-21

问题描述

我正在尝试实现 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-app 时，它在索引组件中有 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>
    );

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

react-adminreactjsreactjsreactjsreactjs