【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 来不及及时更新，这时候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});
    // 这里监听 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});
    // 这里监听 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,
            };
          }
        }
      />
    </>
  );
}