React集成Phone.Email一键手机号登录报错：window.log_in_with_phone未定义

可能原因及对应解决方法 #

1. 确保外部脚本加载完成后再调用函数 #

React组件渲染时，外部脚本可能还未加载完毕，导致window.log_in_with_phone不存在。可以通过两种方式处理：

• 全局提前引入脚本
  在项目public/index.html的<body>末尾添加脚本引入：

  <script src="https://auth.phone.email/login_automated_v1_2.js"></script>
  

  页面加载时脚本会优先加载完成，组件调用函数时就不会出现未定义的情况。

• 组件内动态加载脚本
  如果不想全局引入，可在组件内动态加载并监听加载状态：

  import { useEffect, useState } from 'react';
  
  const PhoneLogin = () => {
    const [isScriptReady, setIsScriptReady] = useState(false);
  
    useEffect(() => {
      const script = document.createElement('script');
      script.src = 'https://auth.phone.email/login_automated_v1_2.js';
      script.onload = () => setIsScriptReady(true);
      script.onerror = () => console.error('Phone.Email登录脚本加载失败');
      document.body.appendChild(script);
  
      return () => document.body.removeChild(script);
    }, []);
  
    const triggerLogin = () => {
      if (isScriptReady && window.log_in_with_phone) {
        window.log_in_with_phone();
      } else {
        console.error('登录脚本未加载完成，无法触发登录');
      }
    };
  
    return (
      <button onClick={triggerLogin} disabled={!isScriptReady}>
        一键手机号登录
      </button>
    );
  };
  
  export default PhoneLogin;
  

2. 检查脚本是否被拦截 #

打开浏览器控制台的网络面板，查看该脚本的请求状态：

• 如果状态显示blocked，说明被广告拦截器或安全插件阻止，需禁用拦截或添加白名单。
• 如果状态为404，确认脚本URL是否输入正确。

3. 确认函数调用时机 #

避免在组件render阶段直接调用window.log_in_with_phone，应放在事件处理函数（如按钮点击）或useEffect钩子中，确保DOM和脚本都已准备就绪。

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