React类组件用Fetch API调用setState报错TypeError: this is undefined

问题核心 #

你已经在构造函数或render中绑定了fetchQuote方法，但Fetch API的异步回调函数（then/catch内的普通函数）自身的this指向并不是组件实例，导致调用this.setState时抛出this is undefined错误。你能打印出tempText说明API请求正常，只是回调内的this指向错误。

具体修复方案 #

方案1：在Fetch回调中使用箭头函数

箭头函数会继承外层作用域的this（即fetchQuote方法中的组件实例），直接解决指向问题：

fetchQuote() {
  fetch('你的名言API地址')
    .then(response => response.json()) // 箭头函数继承外层this
    .then(data => {
      const tempText = data.quote;
      this.setState({ quote: tempText }); // 此处this指向组件实例
    })
    .catch(error => {
      console.error('获取名言失败:', error);
    });
}

方案2：提前保存组件实例的this

在fetchQuote方法开头将组件实例的this存入变量，回调中使用该变量代替this：

fetchQuote() {
  const that = this; // 保存组件实例的this
  fetch('你的名言API地址')
    .then(function(response) {
      return response.json();
    })
    .then(function(data) {
      const tempText = data.quote;
      that.setState({ quote: tempText }); // 使用保存的that调用setState
    })
    .catch(function(error) {
      console.error('获取名言失败:', error);
    });
}

方案3：使用async/await语法（更简洁）

将fetchQuote改为异步方法，用try/catch包裹逻辑，避免回调函数的this指向问题：

async fetchQuote() {
  try {
    const response = await fetch('你的名言API地址');
    const data = await response.json();
    const tempText = data.quote;
    this.setState({ quote: tempText }); // 此处this直接指向组件实例
  } catch (error) {
    console.error('获取名言失败:', error);
  }
}

额外验证 #

确保你已经正确绑定fetchQuote方法：

• 构造函数内绑定（推荐）：

constructor(props) {
  super(props);
  this.state = { quote: '' };
  this.fetchQuote = this.fetchQuote.bind(this); // 必须保留此绑定
}

• 或在render的事件中绑定：

<button onClick={this.fetchQuote.bind(this)}>获取随机名言</button>
// 也可使用箭头函数：<button onClick={() => this.fetchQuote()}>获取随机名言</button>

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