React拖拽后报错：Cannot read properties of undefined (reading 'state')

问题根源 #

你遇到的问题是fetch的then回调函数里的this指向丢失——函数开头能正常访问this.state是因为此时this指向组件实例，但进入then的普通函数回调后，this会指向全局对象（浏览器中是window），所以this.state变成undefined。

可行解决办法 #

1. 在fetch前缓存组件实例的this #

在HandleOnDragEnd函数开头，把组件实例的this存到一个变量（比如that）里，然后在then回调中用这个变量访问state：

HandleOnDragEnd(result) {
  console.log(this.state.sets); // 正常访问
  const that = this; // 缓存组件实例的this
  fetch('/your-api-url', { method: 'POST' })
    .then(response => response.json())
    .then(function(data) {
      if (data.success) {
        // 处理成功逻辑
      } else {
        console.log(that.state); // 用that代替this访问state
        // 其他逻辑
      }
    })
}

2. 将then的回调改为箭头函数 #

箭头函数不会绑定自己的this，会继承外层作用域的this（也就是组件实例），直接替换成箭头函数即可：

HandleOnDragEnd(result) {
  console.log(this.state.sets); // 正常访问
  fetch('/your-api-url', { method: 'POST' })
    .then(response => response.json())
    .then(data => { // 这里用箭头函数
      if (data.success) {
        // 处理成功逻辑
      } else {
        console.log(this.state); // this正常指向组件实例
        // 其他逻辑
      }
    })
}

3. 用async/await改写fetch逻辑 #

用async/await替代回调嵌套，代码更清晰，同时this指向始终保持组件实例：

async HandleOnDragEnd(result) {
  console.log(this.state.sets); // 正常访问
  try {
    const response = await fetch('/your-api-url', { method: 'POST' });
    const data = await response.json();
    if (data.success) {
      // 处理成功逻辑
    } else {
      console.log(this.state); // this正常指向组件实例
      // 其他逻辑
    }
  } catch (error) {
    console.error('请求出错:', error);
  }
}

额外确认：确保HandleOnDragEnd的this绑定正确 #

虽然你说已经尝试过绑定，但再确认两种绑定方式是否正确：

• 构造函数绑定：

constructor(props) {
  super(props);
  this.state = { sets: [] };
  this.HandleOnDragEnd = this.HandleOnDragEnd.bind(this); // 绑定到组件实例
}

• 类字段箭头函数定义：

// 直接用箭头函数定义方法，自动绑定this
HandleOnDragEnd = (result) => {
  // 函数逻辑
}

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