将 setState 与 promise 一起使用后出现错误答案

【问题标题】：Getting an error after using setState with a promise将 setState 与 promise 一起使用后出现错误
【发布时间】：2019-09-27 05:10:24
【问题描述】：

代码：

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

当执行以下代码时，我收到此错误：

undefined is not an object evaluating
('_this.setState({playerMarkerPositionFuture: event.nativeEvent.coordinate}).then')

如果我删除承诺，一切都会按预期进行，这意味着我很可能以错误的方式使用了承诺：

onDragEnd={
    (event) => this.setState({ playerMarkerPositionFuture: event.nativeEvent.coordinate })
}

【问题讨论】：

标签： javascript react-native

【解决方案1】：

setState 接受回调，但不返回承诺。 See docs

对 setState 的调用是异步的 - 不要依赖 this.state 在调用 setState 后立即反映新值。如果您需要根据当前状态计算值，请传递更新函数而不是对象（详情请参见下文）。

(event) => {
    this.setState({playerMarkerPositionFuture: event.nativeEvent.coordinate }, () => alert("hello"));
}

【讨论】：

【解决方案2】：

setState 不返回 Promise。它很可能是一个 void 函数。

【讨论】：

【解决方案3】：

在 setState 完成后不要使用 promise 来调用 alert，而是使用回调

onDragEnd={(event) => 
this.setState({ 
    playerMarkerPositionFuture: event.nativeEvent.coordinate 
}, () => {
    alert("hello")
})}

【讨论】：

【解决方案4】：

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

这是使用 setState() 方法的错误做法。您只能使用setState() 进行回调。

正确的练习：

onDragEnd={(event) => this.setState({ playerMarkerPositionFuture: event.nativeEvent.coordinate },()=>{
    alert("hello")
})

看看这篇文章：

https://medium.com/@voonminghann/when-to-use-callback-function-of-setstate-in-react-37fff67e5a6c

【讨论】：

【解决方案5】：

setState() 并不总是立即更新组件。它可能会批量更新或将更新推迟到以后。这使得在调用 setState() 之后立即读取 this.state 是一个潜在的陷阱。相反，使用 componentDidUpdate 或 setState 回调 (setState(updater, callback))，它们都保证在应用更新后触发。

https://reactjs.org/docs/react-component.html#setstate

这样您就可以在状态更改后使用setState(updater, callback) 执行代码，以保存状态

【讨论】：

【解决方案6】：

如果你想使用 promise ...另一种解决方案可能是

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

并使用它...

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

【讨论】：

【解决方案7】：

试试这个

onDragEnd={(event) => this.setState({ playerMarkerPositionFuture: event.nativeEvent.coordinate },() => alert("hello"))}

【讨论】：