protable作为子组件不会再次请求,渲染没变化?

需求说明:
父组件,一个列表,不同的编码,有个弹出框
弹出框做成一个子组件:内容是渲染一个表格,并请求接口
在这里插入图片描述
子组件:
在这里插入图片描述
✅第一种正确写法:点击不一样行,都会请求接口
因为:params的参数的变化,会重新触发 request

import React from 'react';
import {
  接口api
} from '@/services/product/api';
import { ProTable } from '@ant-design/pro-components';

interface WareHouseRecordProps {
    receiptId: number; //单据
    id: number;
    open?: boolean
}
const WareHouseRecord = (props: WareHouseRecordProps) => {
    const { receiptId ,  id, open}  = props;
    console.log('props, ',props) // 每次打开弹出框,能看到是有渲染的

    const columns = [
        {
            title: '名称1',
            dataIndex: 'code',   
        },
        {
            title: '名称2',
            dataIndex: 'code',   
        },
        {
            title: '名称3',
            dataIndex: 'code',   
        },
        {
            title: '名称4',
            dataIndex: 'code',   
        }
    ]

    // params的参数的变化,会重新触发 request
    return (
        <>
        {id}
        <ProTable
            rowKey={"id"}
            columns={columns}
            params={{
                receiptId,
                id
            }}
            request={(params) => {
                return  接口api(params)
            }}
            search={false}
            options={false}
            onLoad={(dataSource) => {
                console.log('onload',dataSource)
            }}
        />
        </>
    )
}

export default WareHouseRecord

第二种,很多人这样写,就不会触发了

<ProTable
            rowKey={"id"}
            columns={columns}
            request={(params) => {
                return  接口api({...params,receiptId,id})
            }}
            search={false}
            options={false}
            onLoad={(dataSource) => {
                console.log('onload',dataSource)
            }}
        />
  • 6
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值