如何在React中设置加载状态？useState实现API请求加载态遇阻

你的代码存在几个关键问题，导致加载状态无法正常工作：

1. useState解构错误：useState返回的是数组，需要用方括号[]解构，而非大括号{}，且变量命名建议遵循驼峰规范（比如setLoading）。
2. 未处理异步请求的状态重置：fetch是异步操作，你只设置了开始加载的状态，但请求完成（成功或失败）后没有把loading设回false，导致加载状态一直保持。
3. fetch调用不完整：缺少API地址、响应处理和错误捕获逻辑。

修正后的完整代码示例 #

import { useState } from 'react';

const YourComponent = () => {
  // 修正useState的解构方式，驼峰命名更规范
  const [loading, setLoading] = useState(false);
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);

  const getData = () => {
    // 开始请求时设置加载状态为true
    setLoading(true);
    // 重置之前的错误和数据
    setError(null);
    setData(null);

    fetch('https://api.example.com/your-endpoint')
      .then(response => {
        if (!response.ok) {
          throw new Error(`请求失败: ${response.status}`);
        }
        return response.json();
      })
      .then(responseData => {
        setData(responseData);
      })
      .catch(err => {
        setError(err.message);
      })
      .finally(() => {
        // 不管请求成功还是失败，最终都要关闭加载状态
        setLoading(false);
      });
  };

  return (
    <div>
      <button onClick={getData} disabled={loading}>
        {loading ? '加载中...' : '获取数据'}
      </button>
      
      {/* 显示加载状态 */}
      {loading && <p>正在加载数据，请稍候...</p>}
      
      {/* 显示错误信息 */}
      {error && <p style={{ color: 'red' }}>{error}</p>}
      
      {/* 显示获取到的数据 */}
      {data && <pre>{JSON.stringify(data, null, 2)}</pre>}
    </div>
  );
};

export default YourComponent;

关键修正点说明 #

• useState数组解构：useState返回的是状态值和更新函数组成的数组，必须用[]解构，大括号是用来解构对象的，这里会导致loading和setLoading为undefined。
• finally块重置状态：finally会在fetch的Promise完成（不管resolve还是reject）后执行，确保加载状态一定会被关闭，避免出现永久加载的情况。
• 完善错误处理：添加了响应状态检查和catch块，捕获请求过程中的错误，同时更新错误状态用于展示。
• 按钮状态控制：当loading为true时禁用按钮，防止重复点击，同时改变按钮文本提示用户当前状态。

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