React ant-design Table组件datasoure 中一列中有两个字段不能显示的问题

### 如何使用 React 和 Ant Design 构建管理后台 #### 创建基础项目结构 为了创建一个基于 React 和 Ant Design 的管理后台，首先需要安装必要的依赖项。通过 `create-react-app` 可以快速搭建起一个新的 React 应用程序。 ```bash npx create-react-app my-admin-dashboard cd my-admin-dashboard npm install antd axios redux react-redux @reduxjs/toolkit ``` #### 配置全局样式和按需加载 为了避免引入不必要的 CSS 文件，在项目的入口文件中配置 Ant Design 的按需加载功能： ```javascript // src/index.js 或者 src/App.jsx 中 import 'antd/dist/reset.css'; import { ConfigProvider } from 'antd'; function App() { return ( <ConfigProvider> {/* 组件 */} </ConfigProvider> ); } ``` #### 设计布局 采用 Ant Design 提供的 Layout 组件来构建页面框架，通常包括顶部导航栏、侧边菜单以及主要内容区域。 ```jsx // src/components/BasicLayout.jsx import React from 'react'; import { Layout, Menu, Breadcrumb } from 'antd'; const { Header, Content, Footer, Sider } = Layout; export default function BasicLayout({ children }) { return ( <Layout style={{ minHeight: '100vh' }}> <Header className="header"> <div className="logo" /> <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['2']}> <Menu.Item key="1">nav 1</Menu.Item> <Menu.Item key="2">nav 2</Menu.Item> <Menu.Item key="3">nav 3</Menu.Item> </Menu> </Header> <Layout> <Sider width={200} className="site-layout-background"> <Menu mode="inline" defaultSelectedKeys={['1']} defaultOpenKeys={['sub1']} style={{ height: '100%', borderRight: 0 }} > <Menu.SubMenu key="sub1" title={<span>Submenu</span>}> <Menu.Item key="1">Option 1</Menu.Item> <Menu.Item key="2">Option 2</Menu.Item> </Menu.SubMenu> </Menu> </Sider> <Layout style={{ padding: '0 24px 24px' }}> <Breadcrumb style={{ margin: '16px 0' }}> <Breadcrumb.Item>Home</Breadcrumb.Item> <Breadcrumb.Item>List</Breadcrumb.Item> <Breadcrumb.Item>App</Breadcrumb.Item> </Breadcrumb> <Content className="site-layout-background" style={{ padding: 24, margin: 0, minHeight: 280, }} > {children} </Content> </Layout> </Layout> <Footer style={{ textAlign: 'center' }}>Ant Design ©2023 Created by Ant UED</Footer> </Layout> ); } ``` #### 实现表格展示数据 利用 Ant Design 的 Table 组件可以方便地呈现列表形式的数据，并支持分页、筛选等功能[^3]。 ```jsx // src/pages/UserList.jsx import React from 'react'; import { Table } from 'antd'; const UserList = () => { const columns = [ { title: 'Name', dataIndex: 'name', key: 'name', }, { title: 'Age', dataIndex: 'age', key: 'age', }, // 更多字段... ]; const data = Array.from({ length: 5 }).map((_, index) => ({ key: `${index}`, name: `User ${index + 1}`, age: Math.floor(Math.random() * 100), })); return <Table columns={columns} dataSource={data} />; }; export default UserList; ``` #### 表单处理与验证 对于表单操作，推荐使用 Form 组件配合 Input 等输入控件完成信息收集工作；并通过内置规则来进行简单的前端校验[^2]。 ```jsx // src/pages/CreateUser.jsx import React from 'react'; import { Form, Input, Button } from 'antd'; const CreateUser = ({ onCreate }) => { const [form] = Form.useForm(); return ( <Form form={form} layout="vertical" onFinish={(values) => onCreate(values)}> <Form.Item label="Username" name="username" rules={[{ required: true }]}> <Input placeholder="Enter username..." /> </Form.Item> <Button type="primary" htmlType="submit"> Submit </Button> </Form> ); }; ```