react.js - antd-table里的modal，请求服务端问题

问题描述

问 题

有一个页面，默认点击后是antd的表格，表格的每一行的最后一列是一个button，点击button根据当前行的id请求服务端数据，之后会把这些数据渲染到打开的modal框里面。

问题:当加载这个页面后（默认10条），用户还没有点击这个button，但是默认已经请求完10次了，如何做到点击button按钮后再开始请求呢？

下属例子当中，页面加载完毕后，已经请求getDetailsById这个服务端接口10次了。

table组件代码如下。

import { Card, Row, Col, Table, Button, Radio, Input, Icon } from 'antd';
import React from 'react';
import { getDatasById } from './service/index';
import DetailModal from './DetailModal';

class TableForm extends React.Component{
    constructor(props) {
        super(props);
        this.state = {
            dataSource: [],
            loading: false,
        };
        this.columns = [{
            title: 'id',
            dataIndex: 'id',
        }, {
            title: '名字',
            dataIndex: 'name',
        }, {
            title: '详情',
            dataIndex: 'detail',
            render: (text, record, index) => {
                return (
                    this.state.dataSource.length > 1 ?
                        (
                            <DetailModal text={text} />
                        ) : null
                );
            },
        }];
    }
    componentDidMount() {
        this.getDatas();
    }
   
  
    getDatas = () => {
        getDatasById ().then(res => {
            if (res.data !== null && res.code === 1) {
                const dataSource = [];
                res.data.forEach((r) => {
                    dataSource.push({'key':r.id,'id':r.id,'name':r.name,'detail':r.id})
                })
                this.setState({dataSource});
            }
        })
    }
    render() {
        return (
            <div className="gutter-example">
                <Row>
                    <Col className="gutter-row" span={24}>
                        <div className="gutter-box">
                            <Card bordered={false}>
                                <Table
                                bordered
                                dataSource={this.state.dataSource}
                                columns={this.columns}
                                />
                            </Card>
                        </div>
                    </Col>
                </Row>
            </div>
        )
    }
}

const Table= Form.create()(TableForm);
export default Table;

Modal框对应的组件代码如下。

import { Modal, Button, Table } from 'antd';
import React from 'react';
import { getDetailsById } from './service/index';

class DetailModal extends React.Component{
    constructor(props) {
        super(props);
        this.state = {
            visible : false,
            dataSource : [],
        }
        this.columns = [{
            title:'订单号',
            dataIndex:'order_id',
        }, {
            title:'品名',
            dataIndex:'product_name',
        }, {
            title:'物流单号',
            dataIndex:'logistic_id',
        }]
    }
    componentDidMount() {
        const id= this.props.text;
        const dataSource = [];
        getDetailsById (id).then(res => {
            if (res.data !== null && res.code === 1) {
                res.data.forEach((r) => {
                    dataSource.push({'key':r.order_id,'order_id':r.order_id,'product_name':r.product_name,'logistic_id':r.logistic_id})
                })
            }
        })
        this.setState({dataSource});
    }
    showModal = () => {
        this.setState({
            visible: true,
        });
    }
    handleCancel = () => {
        this.setState({ visible: false });
    }
    render() {
        return (
            <div>
                <Button type="primary" onClick={this.showModal}>
                    详情
                </Button>
                <Modal
                    visible={this.state.visible}
                    title="详情"
                    onCancel={this.handleCancel}
                    width="1200px"
                    footer={[
                    <Button key="back" type="primary" size="large" onClick={this.handleCancel}>Cancel</Button>,
                    ]}
                >
                    <Table
                        bordered
                        dataSource={this.state.dataSource}
                        columns={this.columns}
                        pagination={false}
                    />
                </Modal>
            </div>
        )
    }
}

export default DetailModal;

解决方案

你的table组件中
componentDidMount() {

this.getDatas();

}
这样写，当然组件渲染完请求就已经全部执行了呀！
应该是在每一个按钮上绑定一个click事件，当它被点击的时候拿到当前记录的id值，去数据库查询对应记录的详情，渲染到页面上，所以，table组件中最后一列只需要渲染一个按钮：
{

        title: '详情',
        dataIndex: 'detail',
        render: (text, record) => {
            return <button onClick={ () => this.handleClick(record.id)} >Details</button>

},
然后你的点击事件需要执行的操作就是这样：
handleClick(id) = > {

//ajax请求
//拿到详情数据，渲染到modal中，modal的visible置为true(!!state={visible: false}需要在state中定义一个visible，控制modal的显示隐藏)

}

这篇关于react.js - antd-table里的modal，请求服务端问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！