ReactJS报错Cannot read property setState of undefined，新手求REST API数据获取指导

嘿，作为React新手，这种数据加载的困惑太正常啦！虽然SOF上有不少类似问题，但我还是一步步给你理清楚怎么在页面加载时用axios获取远程数据～

一、类组件实现方案（适配你给出的代码结构） #

针对你用的类组件，咱们可以按下面的步骤来：

• 先初始化状态：在组件的state里定义存储数据、加载状态、错误信息的字段，这样能优雅处理不同场景的展示
• 在componentDidMount里发起请求：这个生命周期方法是组件挂载后立即执行的，官方推荐在这里做数据请求，既能保证只执行一次（除非组件重新挂载），又不会影响组件初始化

给你写个完整的示例代码：

import React, { Component } from 'react';
import axios from 'axios';

class DataFetchingComponent extends Component {
  constructor(props) {
    super(props);
    // 初始化状态，管理数据、加载状态和错误
    this.state = {
      data: null,
      loading: true,
      error: null
    };
  }

  componentDidMount() {
    // 发起axios GET请求
    axios.get('你的远程REST API地址')
      .then(response => {
        // 请求成功，更新状态，关闭加载提示
        this.setState({
          data: response.data,
          loading: false
        });
      })
      .catch(error => {
        // 请求失败，捕获错误信息
        this.setState({
          error: error.message,
          loading: false
        });
      });
  }

  render() {
    const { data, loading, error } = this.state;

    // 加载中状态：给用户明确的反馈
    if (loading) {
      return <div>加载中...</div>;
    }

    // 错误状态：友好提示用户出问题了
    if (error) {
      return <div>出错啦：{error}</div>;
    }

    // 数据加载完成，渲染你需要的内容
    return (
      <div>
        <h2>获取到的远程数据</h2>
        <pre>{JSON.stringify(data, null, 2)}</pre>
      </div>
    );
  }
}

export default DataFetchingComponent;

二、关于“页面加载前”的澄清 #

你提到的“页面加载前”其实更准确的是组件渲染可见内容前获取数据。上面的方案是组件挂载后立即发起请求，在请求完成前显示加载状态，这样用户不会看到空白或者不完整的内容。如果是服务端渲染（SSR）场景，处理方式会不同，但普通客户端React应用，这个方案就是最常用的。

三、额外实用提示 #

• 一定要处理错误状态：网络异常、API返回错误码这些情况都要考虑，别让用户对着空白页面一脸懵
• 如果需要在props变化时重新请求数据，可以用componentDidUpdate生命周期，但记得加条件判断，避免无限循环
• 现在很多新项目用函数组件+Hook，对应的方案是用useEffect Hook，逻辑和类组件类似，给你个快速示例：

import React, { useState, useEffect } from 'react';
import axios from 'axios';

function DataFetchingHookComponent() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    // 用async/await写异步请求更直观
    const fetchData = async () => {
      try {
        const response = await axios.get('你的远程REST API地址');
        setData(response.data);
        setLoading(false);
      } catch (err) {
        setError(err.message);
        setLoading(false);
      }
    };

    fetchData();
  }, []); // 空数组依赖表示只在组件挂载时执行一次

  if (loading) return <div>加载中...</div>;
  if (error) return <div>出错啦：{error}</div>;

  return (
    <div>
      <h2>获取到的远程数据</h2>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

export default DataFetchingHookComponent;

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