【ProComponents】解决 ProTable 中 params 参数改变，request 函数未触发问题

1. 先建议自查下官方文档，了解params和request直接的关系

2. 确定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});
    // 这里监听 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,
            };
          }
        }
      />
    </>
  );
}

3. 如果user_name 参数发生改变，且能正常监听，那导致request 未触发的原因就是：

• params 更新频率过高，导致 ProTable 来不及及时更新，这时候采用节流或防抖就可以了
• 而ProTable自带了一个防抖时间设置属性debounceTime，默认是10毫秒，这时候我们调高数据就好了，比如300毫米

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});
    // 这里监听 user_name 是否发生了改变
    console.log('user_name = ', searchParams.user_name)
  }, [searchParams.user_name]);

  return (
    <>
      <ProTable
        {/* ...这里做了代码省略，只保留关键属性 */}
        params={{
          ...selectValue,
        }}
        debounceTime={300}
        request={async (params) => {
            console.log('参数 =', params);

            const data = await get_list({...省略});
            return {
              data,
              success: true,
              total: data.total,
            };
          }
        }
      />
    </>
  );
}

• 然后我们还可以把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});
    // 这里监听 user_name 是否发生了改变
    console.log('user_name = ', searchParams.user_name)
  }, [searchParams.user_name]);
  
  const params = useMemo(()=>({
  	...selectValue,
  }),[selectValue])

  return (
    <>
      <ProTable
        {/* ...这里做了代码省略，只保留关键属性 */}
        params={params}
        debounceTime={300}
        request={async (params) => {
            console.log('参数 =', params);

            const data = await get_list({...省略});
            return {
              data,
              success: true,
              total: data.total,
            };
          }
        }
      />
    </>
  );
}