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