React JS中如何正确调用带参箭头函数（传参undefined问题排查）

参数全为undefined的核心原因是函数形参的解构规则和实参传递方式不匹配：

• 定义fetchSavedFilters时采用了单入参对象解构的写法：

  const fetchSavedFilters = ({ tenantId, id }) => {
    // 逻辑省略
  }
  

  这种写法要求函数必须接收1个实参，且该实参是包含tenantId、id属性的对象，函数会自动从传入的对象中拆分出两个属性供内部使用。
• 实际调用时却传递了两个独立的实参：

  fetchSavedFilters(tenantId, values.savedFilterIds[0])
  

  此时函数只会把第一个传入的tenantId值当作待解构的对象，由于第一个实参本身不是带tenantId、id属性的对象，解构出来的两个内部变量自然全部为undefined，第二个传入的values.savedFilterIds[0]根本没有被函数接收。

方案1：调整调用格式，匹配现有函数的解构要求 #

调用时按照函数的入参规则，直接传入包含对应属性的对象即可：

// 原错误调用
var fetchedFilters = fetchSavedFilters(tenantId, values.savedFilterIds[0]);

// 修复后调用
var fetchedFilters = fetchSavedFilters({
  tenantId: tenantId,
  id: values.savedFilterIds[0]
});

方案2：调整函数定义，匹配现有两参数的调用习惯 #

如果希望保留传两个独立参数的调用方式，就把函数的形参从“单对象解构”改成两个独立形参：

// 原函数定义
const fetchSavedFilters = ({ tenantId, id }) => {
  client.query({
    query: GET_SAVED_FILTER,
    variables: { tenantId: tenantId, id: id, },
    fetchPolicy: "network-only",
  }).then(
    resp => {
      console.log("Responce received for single savedFilter :", resp);
      return resp;
    }
  );
};

// 适配两参数调用的修改版
const fetchSavedFilters = (tenantId, id) => {
  client.query({
    query: GET_SAVED_FILTER,
    variables: { tenantId: tenantId, id: id, },
    fetchPolicy: "network-only",
  }).then(
    resp => {
      console.log("Response received for single savedFilter :", resp);
      return resp;
    }
  );
};

• fetchSavedFilters内部返回了client.query生成的Promise，当前代码直接给fetchedFilters赋值的话，拿到的是未决议的Promise对象，并非接口返回的实际数据。如果后续需要使用接口返回值做后续逻辑，需要补充await关键字，或者在Promise的.then回调中处理对应逻辑。
• 原代码日志里的Responce为拼写偏差，正确拼写为Response，该问题不影响功能运行，但会降低代码可读性。

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