React中使用setState结合Promise后出现报错问题咨询

嘿，这个问题我之前踩过坑！你触发错误的核心原因很明确：React类组件里的setState方法本身并不返回Promise对象，所以你没法直接在它后面链式调用.then()——这就是为什么会抛出undefined is not an object evaluating '_this.setState(...).then'的错误。

下面给你两种简单可行的解决方法，按需选择：

方法一：使用setState的内置回调参数 #

setState本身提供了第二个参数，这是一个状态更新完成后会触发的回调函数，刚好能满足你想在状态更新后执行alert的需求：

onDragEnd = { (event) => {
  this.setState(
    { playerMarkerPositionFuture: event.nativeEvent.coordinate },
    // 状态更新完成后执行的回调
    () => alert("hello")
  )
} }

这种方式是React官方推荐的、最直接的“状态更新后执行操作”的写法，适合简单的场景。

方法二：将setState封装为Promise（支持.then或async/await） #

如果你习惯Promise链式调用或者需要在多个异步状态更新后串联执行操作，可以自己封装一个返回Promise的setState方法：

首先在你的类组件里添加这个封装函数：

setStateAsync = (stateObj) => {
  return new Promise((resolve) => {
    this.setState(stateObj, resolve);
  });
}

然后就可以像Promise一样使用它了：

用.then链式调用 #

onDragEnd = { (event) => {
  this.setStateAsync({ playerMarkerPositionFuture: event.nativeEvent.coordinate })
    .then(() => alert("hello"));
} }

用async/await语法（更简洁） #

onDragEnd = { async (event) => {
  await this.setStateAsync({ playerMarkerPositionFuture: event.nativeEvent.coordinate });
  alert("hello");
} }

这种封装方式能让你在需要异步处理状态更新的场景下，用更流畅的异步语法编写代码。

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