React中出现‘this is undefined’错误，如何正确打印接口数据？

错误根源与修复步骤 #

• 类继承语法错误：你代码里的class App extends Component()是错误写法，继承React Component时不需要加括号，正确写法是class App extends Component。这个语法错误会直接导致组件初始化时this指向异常，触发"this is undefined"错误。
• 可选优化：将获取的数据存入state：如果需要把接口返回的用户数据存入组件state（比如后续渲染到页面），可以在第二个.then里更新state，箭头函数会自动绑定当前组件的this，避免指向问题。

修正后的完整代码 #

import { Component } from 'react';
import logo from './logo.svg';
import './App.css';

// 修复类继承的括号问题
class App extends Component {
  constructor() {
    super();
    this.state = {
      monsters: [],
    };
  }

  componentDidMount() {
    fetch('https://jsonplaceholder.typicode.com/users')
      .then((response) => response.json())
      .then((users) => {
        console.log('获取到的用户数据：', users);
        // 可选：将数据存入state，供后续渲染使用
        this.setState({ monsters: users });
      })
      .catch((error) => {
        // 新增错误捕获，处理请求失败的情况
        console.error('数据获取失败：', error);
      });
  }

  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Edit <code>src/App.js</code> and save to reload.
          </p>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
        </header>
      </div>
    );
  }
}

export default App;

关键说明 #

• 修正类继承语法后，组件的this会正确指向组件实例，不会再出现undefined的问题。
• 使用箭头函数处理fetch的回调，确保this.setState能正确访问到组件的state更新方法。
• 新增.catch捕获请求异常，避免网络错误导致的程序崩溃。

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