React应用中如何给API调用传入默认page.size参数

你当前的写法有两个核心问题：一是在对象字面量的属性值位置写了赋值表达式DEFAULT_PAGEABLE.page.size = 7，这不符合JavaScript对象的语法规范，直接导致参数传递失效；二是这种写法会直接修改全局的DEFAULT_PAGEABLE对象，很可能影响其他地方的API调用逻辑。

给你几种靠谱的解决方式，根据你的实际需求选择：

1. 推荐：创建新的pageable对象（不修改原默认配置） #

这种方式不会改动原有的DEFAULT_PAGEABLE，避免全局副作用，是最安全的做法：

Promise.all([
  api.solutionForms.search({
    pageable: { ...DEFAULT_PAGEABLE.page, size: 7 }, // 解构原page属性，覆盖size为7
    statuses: [SolutionFormStatus.APPROVAL_REQUIRED.name]
  }),
]).then(values => {
  const [ solutionformsRequiringAction ] = values;
  this.setState({ 
    loading: false, 
    solutionformsRequiringAction: solutionformsRequiringAction
  });
});

原理是用对象扩展运算符...把DEFAULT_PAGEABLE.page的所有属性复制到新对象里，然后单独指定size:7来覆盖原有的值，这样传入API的就是一个全新的、符合你需求的page配置。

2. 不推荐：直接修改原默认配置（仅当全局都需要这个size时用） #

如果你确定所有地方都需要把默认size改成7，或者临时修改不会影响其他逻辑，可以先修改原对象再传入：

// 先修改全局默认配置的size
DEFAULT_PAGEABLE.page.size = 7;

Promise.all([
  api.solutionForms.search({
    pageable: DEFAULT_PAGEABLE.page,
    statuses: [SolutionFormStatus.APPROVAL_REQUIRED.name]
  }),
]).then(values => {
  const [ solutionformsRequiringAction ] = values;
  this.setState({ 
    loading: false, 
    solutionformsRequiringAction: solutionformsRequiringAction
  });
});

⚠️ 注意：这种方式会永久改变DEFAULT_PAGEABLE的size值，后续其他调用这个默认配置的地方都会用7作为size，所以除非你明确要全局修改，否则别用这个方法。

3. 如果API需要完整的Pageable对象（包含page等子属性） #

如果你的pageable参数是一个包含page子对象的完整结构，就需要深层解构复制：

Promise.all([
  api.solutionForms.search({
    pageable: { 
      ...DEFAULT_PAGEABLE, 
      page: { ...DEFAULT_PAGEABLE.page, size: 7 } 
    },
    statuses: [SolutionFormStatus.APPROVAL_REQUIRED.name]
  }),
]).then(values => {
  const [ solutionformsRequiringAction ] = values;
  this.setState({ 
    loading: false, 
    solutionformsRequiringAction: solutionformsRequiringAction
  });
});

这样既保留了原DEFAULT_PAGEABLE的其他属性，又单独修改了page.size的值。

内容的提问来源于stack exchange，提问作者Baba