17.分类组件Category 动态获取数据
我们接下来做分类组件Category, 这个主要用来管理商品的分类,有一级和二级, 可以实现一级与二级之间跳转
/pages/category/category.jsx文件内容如下:
import React, {Component} from 'react' import {Button, Card, Table, message} from 'antd' import { PlusOutlined, DoubleRightOutlined } from "@ant-design/icons"; import {reqCategories, reqAddCategory, reqUpdateCategory} from "../../api" import LinkButton from '../../components/link-button' /* 商品分类路由 */ export default class Category extends Component{ state = { loading: false, categories: [], subCategories: [], parentId: '0', categoryName: '', } /* 初始化Table所有列的数组 */ initColumns = () => { this.columns = [ { title: '分类名称', dataIndex: 'name', // 显示数据对应的属性名信息 // key: 'uniq_id', // 可以增加 Table组件的 rowKey="uniq_id" 属性来替代 }, { title: '操作', width: 350, render: (categoryObj) => ( // 返回需要显示的表格界面操作标签 <span> <LinkButton>修改分类</LinkButton> {/* 如何向事件回调函数传递参数:先定义一个匿名函数,在函数调用处理的函数并传入参数*/} {this.state.parentId === '0' ? <LinkButton onClick={() => this.showSubCategories(categoryObj)}>查看子分类</LinkButton> : null} </span> ) }, ] } /* 异步获取一级/二级分类数据 */ getCategories = async () => { // 发送请求前,显示loading this.setState({loading: true}) const {parentId} = this.state // 发送异步ajax请求,获取分类数据,只有await才会获取的response,否则获取的是promise对象 const result = await reqCategories(parentId) // 请求成功后,关闭loading this.setState({loading: false}) if (result['code'] === 1) { const categories = result['data'] // 更新state中一级分类的数据 if(parentId === '0'){ this.setState({categories}) }else{ // 更新state中二级分类的数据 this.setState({subCategories: categories}) } }else{ message.error(result['message']) } } // 点击查看子分类,显示二级分类信息 showSubCategories = (categoryObj) =>{ // 更新状态, 有个问题就是setState是异步操作,导致无法正常获取parent_id,所以需要再增加一个回调函数 this.setState({ parentId: categoryObj.uniq_id, categoryName: categoryObj.name }, ()=>{ // 新增回调函数, 达到状态更新后且重新render后执行 this.getCategories() }) } // 点击一级分类列表 显示信息 showCategories = () => { // 更新显示一级列表状态 this.setState({ subCategories: [], parentId: '0', categoryName: '', }) } componentDidMount() { this.initColumns() this.getCategories() } render() { const {categories, subCategories, parentId, categoryName, loading} = this.state const title = this.state.parentId === '0' ? '一级分类列表' : ( <span> <LinkButton onClick={this.showCategories}>一级分类列表</LinkButton> <DoubleRightOutlined style={{marginRight: 10}} /> <span>{categoryName}</span> </span> ) const extra = ( <Button type="primary"> <PlusOutlined /> 添加 </Button> ) return ( <Card title={title} extra={extra} > <Table bordered rowKey="uniq_id" loading={loading} dataSource={parentId === '0' ? categories : subCategories} columns={this.columns} pagination={{ defaultPageSize: 5, showQuickJumper: true, }} /> </Card> ) } }
整个项目已经开发完成,包括前后台,需要源码的可以联系: 微信号:guos_123