如何根据antd Select选中项动态为antd Table加载对应数据源

• 首先修正一个导入错误：你当前代码里的Option是从提及组件导入的，不是Select的Option，会导致下拉选项异常，先把导入改成从antd的Select导出：

  // 把原来的import { Option } from "antd/lib/mentions"; 删掉，改成下面的写法
  import { Select } from "antd";
  const { Option } = Select;
  

• 定义数据源映射对象：把你各个场景的数据源统一放到一个对象里，key和Select的value值一一对应，方便后续取值

  // 这里的schoolData、hospitalData、policeStationData就是你各自的数据源变量
  const dataSourceMap = {
    school: schoolData,
    hospital: hospitalData,
    policeStation: policeStationData
  }
  

• 放开你之前注释的layer状态，用来存储当前选中的下拉值，默认值和Select的defaultValue保持一致设为school：

  const [layer, setLayer] = useState('school')
  

• 修改Select的onChange回调函数，把选中的值更新到layer状态：

  const selectLayer = (value) => {
    setLayer(value)
  }
  

• 最后修改Table的dataSource属性，动态从映射对象里取对应数据源：

  <Table
    dataSource={dataSourceMap[layer]}
    // 其他原有属性保持不变
  />
  

完整修改后代码参考 #

import React, { useState } from "react";
import Framework from "../framework/Framework";
import { Dropdown, Button, Table, message, Select } from "antd";
import { DeleteOutlined, DownOutlined, EditOutlined } from "@ant-design/icons";
import { Content } from "antd/lib/layout/layout";
import AddNewButton from "../addNewButton/AddNewButton";
import "./attributes.css";
// 这里导入你自己的各个数据源变量
import schoolData from './schoolData'
import hospitalData from './hospitalData'
import policeStationData from './policeStationData'
import IconDescription from "../icondescription/IconDescription";
import Modal from "antd/lib/modal/Modal";
const { Option } = Select;

const Attributes = () => {
    const [page, setPage] = useState(1);
    const [isModalVisible, setIsModalVisible] = useState(false)
    // 存储当前选中的分类
    const [layer, setLayer] = useState('school')
    // 数据源映射
    const dataSourceMap = {
        school: schoolData,
        hospital: hospitalData,
        policeStation: policeStationData
    }

    const columns = [
        {
            title: "S.N",
            dataIndex: "key",
        },
        {
            title: "Name",
            dataIndex: "name",
            key: "name",
        },
        {
            title: "Address",
            dataIndex: "address",
            key: "address",
        },
        {
            title: "Contact No.",
            dataIndex: "contactno",
            key: "contactno",
        },
        {
            title: "Operation",
            dataIndex: "operation",
            key: "operation",
            render: () => {
                return (
                    <div style={{ display: "flex" }}>
                        <IconDescription icon={<EditOutlined />} label="Edit" />
                        <IconDescription icon={<DeleteOutlined />} label="Delete" />
                    </div>
                );
            },
        },
    ];

    const addAttribute = () => {
        setIsModalVisible(true)
    }

    const modalHandleOk = () => {
        setIsModalVisible(false);
    };

    const modalHandleCancel = () => {
        setIsModalVisible(false);
    };

    const selectLayer = (value) => {
        setLayer(value)
    }

    return (
        <Framework>
            <Content className="attributes">
                <div className="select-addNewBtn-container">
                    <Select defaultValue="school" style={{ width: 120 }} onChange={selectLayer}>
                        <Option value="school">School</Option>
                        <Option value="hospital">Hospital</Option>
                        <Option value="policeStation">Police Station</Option>
                    </Select>
                    <AddNewButton name={"Add New Attribute"} addNewBtn={addAttribute} />
                    <Modal title={"Add New Attribute"} visible={isModalVisible} centered onCancel={modalHandleCancel} onOk={modalHandleOk}>
                    </Modal>
                </div>
                <Table
                    dataSource={dataSourceMap[layer]}
                    columns={columns}
                    className="data-table"
                    pagination={{
                        size: "small",
                        pageSize: 6,
                        hideOnSinglePage: true,
                        showSizeChanger: false,
                    }}
                />
            </Content>
        </Framework>
    );
};

export default Attributes;

如果你的数据源是后续从接口请求获取的，只需要在selectLayer回调里加对应的接口请求逻辑，把返回结果存到状态里再绑定给Table即可。

内容的提问来源于stack exchange，提问作者j0hnSn0w