文章目录
- 先建议自查下官方文档,了解
params
和request
直接的关系
- 确定
params
绑定的参数是否改变,例如 user_name
参数
import { ProTable, WxIcon } from '@/components';
import { getSearchParams } from 'ice';
import { useEffect, useMemo, useRef, useState } from 'react';
import store from '@/store';
export default function (props) {
const searchParams = getSearchParams();
const [selectValue, setSelectValue] = useState({
a: 'user',
b: undefined,
c: null,
user_name: null,
});
useEffect(() => {
setSelectValue({ ...selectValue, user_name: searchParams.user_name});
console.log('user_name = ', searchParams.user_name)
}, [searchParams.user_name]);
return (
<>
<ProTable
{}
params={{
...selectValue,
}}
request={async (params) => {
console.log('参数 =', params);
const data = await get_list({...省略});
return {
data,
success: true,
total: data.total,
};
}
}
/>
</>
);
}
- 如果
user_name
参数发生改变,且能正常监听,那导致request
未触发的原因就是:
params
更新频率过高,导致 ProTable
来不及及时更新,这时候request
采用节流或防抖就可以了debounce
是lodash
工具库中的防抖函数,也可以通过 js 原生去写防抖
import { ProTable, WxIcon } from '@/components';
import { getSearchParams } from 'ice';
import { useEffect, useMemo, useRef, useState } from 'react';
import store from '@/store';
import { debounce } from 'lodash';
export default function (props) {
const searchParams = getSearchParams();
const [selectValue, setSelectValue] = useState({
a: 'user',
b: undefined,
c: null,
user_name: null,
});
useEffect(() => {
setSelectValue({ ...selectValue, user_name: searchParams.user_name});
console.log('user_name = ', searchParams.user_name)
}, [searchParams.user_name]);
return (
<>
<ProTable
{}
params={{
...selectValue,
}}
request={
debounce(async (params) => {
console.log('参数 =', params);
const data = await get_list({...省略});
return {
data,
success: true,
total: data.total,
};
}, 800)
}
/>
</>
);
}
- 如果上面方法仍未解决,可以参考下面这个,给
params
添加useMemo
; params
提到 useMemo
中,可以避免每次 render
都触发创建一个新 params
对象导致不必要的更新
import { ProTable, WxIcon } from '@/components';
import { getSearchParams } from 'ice';
import { useEffect, useMemo, useRef, useState } from 'react';
import store from '@/store';
export default function (props) {
const searchParams = getSearchParams();
const [selectValue, setSelectValue] = useState({
a: 'user',
b: undefined,
c: null,
user_name: null,
});
useEffect(() => {
setSelectValue({ ...selectValue, user_name: searchParams.user_name});
console.log('user_name = ', searchParams.user_name)
}, [searchParams.user_name]);
const params = useMemo(()=>({
...selectValue,
}),[selectValue])
return (
<>
<ProTable
{}
params={params}
request={async (params) => {
console.log('参数 =', params);
const data = await get_list({...省略});
return {
data,
success: true,
total: data.total,
};
}
}
/>
</>
);
}