为何初始loading为false仍显示Loading？React组件生命周期疑问

嘿，我来帮你捋清楚这个问题～你的代码逻辑本身是通顺的，但之所以一直显示Loading，核心原因是你的异步请求没有成功完成，导致最后那个把loading设为false的setState根本没执行。

具体问题分析 #

1. API地址已失效：你用的https://swapi.co/api/people/1这个星球大战API地址已经停止服务了，现在官方迁移到了https://swapi.dev/api/people/1。旧地址会返回错误，导致fetch的第二个then（处理返回数据的那一步）不会触发，自然也就不会更新loading状态。
2. 缺少错误处理：你没有给fetch添加错误捕获逻辑，不管是API地址错误、网络故障还是返回非200的状态码，都会导致后续的成功回调不执行，loading就会一直停留在true的状态。

修复后的代码示例 #

我把API地址替换成有效的，同时加上了错误处理，确保不管请求成功还是失败，loading状态都会被正确更新：

class App extends Component {
  constructor() {
    super();
    this.state = { loading: false, character: {}, error: '' };
  }

  componentDidMount() {
    this.setState({ loading: true });
    fetch('https://swapi.dev/api/people/1')
      .then((res) => {
        // 先判断请求是否成功，fetch只有网络错误才会走catch，状态码错误需要手动判断
        if (!res.ok) {
          throw new Error('请求失败');
        }
        return res.json();
      })
      .then((data) => {
        this.setState({ loading: false, character: data, error: '' });
      })
      .catch((err) => {
        // 捕获所有错误，更新状态提示用户
        this.setState({ loading: false, error: err.message });
      });
  }

  render() {
    const { loading, character, error } = this.state;
    return (
      <div>
        {loading ? (
          <p>Loading</p>
        ) : error ? (
          <p>出错了：{error}</p>
        ) : (
          <p>{character.name}</p>
        )}
      </div>
    );
  }
}

额外注意事项 #

• 调试异步请求时，可以打开浏览器的Network面板，查看请求的状态码和返回内容，快速定位问题
• 永远不要忽略异步操作的错误处理，否则很容易出现状态卡住的情况
• 公共API可能会有迁移或停止服务的情况，使用前最好确认地址的有效性

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