React代码第46行语法报错：排查return、async使用错误

第46行的语法错误不是return关键字使用在函数作用域外导致的，故障根源是async关键字冗余使用、写法不规范。

问题排查依据 #

• 所有return语句均处于合法作用域内：
  • 输入判空的return位于handleSubmit函数作用域
  • return response位于submit_hubspot_form函数作用域
  • 组件JSX的return位于FormHSNewsletter组件函数作用域
    不存在return越界的语法问题。
• 触发报错的冗余写法位于submit_hubspot_form函数内：
  原代码错误将axios请求包装成了一个未执行的async箭头函数赋值给response变量：

  // 错误写法：把请求包成了未调用的async函数，触发语法解析异常
  const response = async (e) =>
    await axios.post(/* 请求参数 */)
  

  这种写法既无意义（参数e从未被使用，返回的是函数本身而非请求结果），还会导致JS编译器在解析箭头函数返回值时，在第46行位置抛出语法错误。
• 额外隐藏逻辑问题（不触发本次语法报错，但会导致订阅功能失效）：请求URL使用双引号包裹，内部的模板字符串插值${portalId}/${formGuid}不会被解析，需要替换为反引号包裹才能正确拼接地址。

修正后的代码片段 #

只需要移除冗余的async箭头函数包装，修正URL引号即可：

async function submit_hubspot_form(email, firstname) {
  const portalId = process.env.REACT_APP_HUBSPOT_PORTAL_ID;
  const formGuid = process.env.REACT_APP_HUBSPOT_NEWSLETTER_ID;
  const config = {
    headers: {
      "Content-Type": "application/json"
    }
  };

  // 直接执行axios请求，移除多余的async (e) => 包装，URL换反引号
  const response = await axios.post(
    `https://api.hsforms.com/submissions/v3/integration/submit/${portalId}/${formGuid}`,
    {
      portalId,
      formGuid,
      fields: [
        {
          name: "firstname",
          value: firstname
        },
        {
          name: "email",
          value: email
        }
      ]
    },
    config
  );
  return response;
}

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