React Query中useMutation如何实现Axios finally的加载状态处理？

原实现方式 #

我原本的加载状态处理如下：

const [loading,setLoading] = useState(true)

通常在Axios的Promise中，我会在finally()里将加载状态设为false：

axios.post(...).then().catch().finally(() => setLoading(false));

问题 #

在React Query的useMutation中该如何实现这一逻辑？

const {data,isLoading} = useMutation(...);

解决方案 #

React Query的useMutation已经内置了完整的请求状态管理，无需手动维护loading状态或在finally中更新，直接使用它返回的状态值即可：

• 核心：使用内置的isLoading状态
  useMutation会自动在请求发起时将isLoading设为true，请求无论成功还是失败完成后，都会自动把isLoading设为false，完全替代你之前手动在finally里的操作。示例代码：

  import { useMutation } from '@tanstack/react-query';
  import axios from 'axios';
  
  function YourComponent() {
    const { mutate, isLoading } = useMutation((formData) => {
      // 这里写你的请求逻辑
      return axios.post('/api/submit', formData);
    });
  
    const handleSubmit = (data) => {
      mutate(data); // 触发请求
    };
  
    return (
      <div>
        <form onSubmit={(e) => {
          e.preventDefault();
          handleSubmit(e.target.elements);
        }}>
          {/* 表单内容 */}
          <button type="submit" disabled={isLoading}>
            {isLoading ? '提交中...' : '提交'}
          </button>
        </form>
      </div>
    );
  }
  

• 可选：更细分的状态控制
  如果需要更精细的状态区分，useMutation还提供了这些状态值：

  • isIdle：初始状态，从未触发过请求
  • isSuccess：请求成功完成
  • isError：请求失败
    你可以利用这些状态实现更丰富的UI反馈，比如请求成功后显示成功提示，失败后显示错误信息。

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