开发邮箱验证UI时遭遇API请求超限问题求助

你的代码存在多次重复触发API请求的情况，这才导致触发了请求频率限制：

• 组件函数体直接调用API：React组件每次渲染时，函数体中的代码都会执行。你在return语句上方直接写了validateEmail('POOKIEWOOKIE.com')，这意味着：
  • 组件首次渲染时会发起一次API请求
  • 当调用setResult(data)更新状态后，组件会重新渲染，这个调用会再次执行，又触发一次API请求
• useEffect的额外请求：你在仅首次渲染执行的useEffect（依赖为空数组）里，又调用了一次validateEmail('')，等于首次渲染时就发起了两次API请求，直接超过了每秒1次的限制。

把API调用逻辑统一放到useEffect中，通过依赖控制请求触发时机，避免重复调用：

function App() {
  const [result, setResult] = useState('');
  // 把目标邮箱设为状态，方便后续扩展修改
  const [targetEmail, setTargetEmail] = useState('POOKIEWOOKIE.com');

  useEffect(() => {
    async function validateEmail() {
      if (!targetEmail) return; // 避免空邮箱的无效请求
      const response = await fetch(`https://emailvalidation.abstractapi.com/v1/?api_key=${API_KEY}&email=${targetEmail}`);
      const data = await response.json();
      console.log(data);
      // 直接渲染对象会显示[Object object]，转成字符串才能正常展示
      setResult(JSON.stringify(data, null, 2));
    }

    validateEmail();
  }, [targetEmail]); // 仅当目标邮箱变化时才发起请求

  return (
    <div className="App">
      <pre>{result}</pre> {/* 使用pre标签格式化JSON字符串展示 */}
    </div>
  );
}

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