需求说明:
父组件,一个列表,不同的编码,有个弹出框
弹出框做成一个子组件:内容是渲染一个表格,并请求接口
子组件:
✅第一种正确写法:点击不一样行,都会请求接口
因为: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)
}}
/>