如何在React中使用fetch() API并通过setState更新状态

嘿，我看你正在写一个用fetch() API获取数据的React类组件，代码写到一半啦，我来帮你补全并修正，让它能正常获取数据、更新状态并渲染出来～

首先，你的代码里fetch的链式调用没完成，而且普通函数里的this指向会有问题，另外也没做错误处理，我先给你完整的可运行代码：

import React from 'react';

export default class Test extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      apiInfo: [], // 目标接口返回的是用户数组，初始值设为空数组更合理
      isLoading: true,
      error: null
    };
  }

  componentDidMount(){
    fetch('https://fcctop100.herokuapp.com/api/fccusers/top/recent')
      .then(response => {
        // 先检查响应是否成功，避免把错误响应当成有效数据解析
        if (!response.ok) {
          throw new Error(`请求失败！状态码: ${response.status}`);
        }
        return response.json();
      })
      .then(data => {
        // 更新状态，把获取到的用户数据存到apiInfo里
        this.setState({
          apiInfo: data,
          isLoading: false
        });
      })
      .catch(error => {
        // 捕获请求过程中的所有错误，比如网络断开、接口报错等
        this.setState({
          error: error.message,
          isLoading: false
        });
        console.error('获取数据出错:', error);
      });
  }

  render() {
    const { apiInfo, isLoading, error } = this.state;

    // 加载状态提示
    if (isLoading) {
      return <div>数据加载中...</div>;
    }

    // 错误状态提示
    if (error) {
      return <div>哎呀，出错了: {error}</div>;
    }

    // 正常渲染用户列表
    return (
      <div className="user-list">
        <h2>FCC 近期积分Top100用户</h2>
        <ul>
          {apiInfo.map(user => (
            <li key={user.username}>
              <p><strong>用户名:</strong> {user.username}</p>
              <p><strong>近期积分:</strong> {user.recent}</p>
              <p><strong>总积分:</strong> {user.alltime}</p>
            </li>
          ))}
        </ul>
      </div>
    );
  }
}

我给你做了这几个关键优化：

• 把apiInfo的初始值改成空数组，贴合接口返回的数组结构，避免渲染时类型错误
• 新增isLoading和error状态，用来处理加载中和请求失败的场景，提升用户体验
• 用箭头函数替代普通函数，避免this指向错误（如果坚持用普通函数，你需要在constructor里绑定this，或者用.bind(this)，但箭头函数更简洁）
• 增加响应状态检查（response.ok），提前拦截错误响应
• 加上catch捕获所有请求异常，防止组件崩溃

另外补充一点：在类组件里，componentDidMount是发起网络请求的最佳生命周期钩子，因为此时组件已经挂载到DOM上，更新状态会触发正确的重新渲染。

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