React onClick触发POST请求并跳转报错问题及解决方法

React Hook的规则明确要求只能在函数组件的顶层或自定义Hook的顶层调用，不能在事件处理函数、循环、条件判断等嵌套逻辑里调用，所以你在onAccept点击事件函数里调用usePost会直接触发报错。

以下是可行的实现方案：

核心思路 #

调整自定义usePost Hook的设计，让它返回一个可在事件中触发的请求函数，而非直接在Hook内部发起请求，同时由Hook管理请求相关的状态（加载、数据、错误）。

步骤1：修改自定义usePost Hook #

import { useState } from 'react';

const usePost = () => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  // 定义触发POST请求的异步函数
  const sendPost = async (url, payload) => {
    setLoading(true);
    setError(null);
    try {
      const response = await fetch(url, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload)
      });
      const responseData = await response.json();
      setData(responseData);
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };

  return { data, loading, error, sendPost };
};

步骤2：在组件中正确使用 #

import { useState, useNavigate } from 'react';

const YourComponent = () => {
  const navigate = useNavigate();
  const [userInput, setUserInput] = useState(''); // 存储用户输入的state
  const { data, loading, error, sendPost } = usePost();

  const onAccept = async () => {
    // 调用sendPost发起POST请求
    await sendPost('MY_URL', { DATA: userInput });
    // 请求完成后判断状态并跳转
    if (data && !error) {
      navigate('/');
    }
  };

  return (
    <div>
      <input 
        type="text" 
        value={userInput} 
        onChange={(e) => setUserInput(e.target.value)} 
        placeholder="输入内容"
      />
      <button onClick={onAccept} disabled={loading}>
        {loading ? '提交中...' : '确认'}
      </button>
      {error && <p style={{ color: 'red' }}>提交失败：{error}</p>}
    </div>
  );
};

方案说明 #

• usePost在组件顶层调用，完全符合React Hook规则；
• sendPost是普通异步函数，可安全在点击事件中调用，请求过程中会自动更新Hook内部的状态；
• 给按钮添加disabled属性防止重复提交，同时通过加载态、错误提示提升用户体验。

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