Получение ошибки после использования setState с обещанием

Код:

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 })
}

Ответ 1

setState принимает обратный вызов, но не возвращает обещание. См документы

Вызовы setState являются асинхронными - не полагайтесь на this.state, чтобы отобразить новое значение сразу после вызова setState. Передайте функцию обновления вместо объекта, если вам нужно вычислить значения на основе текущего состояния (подробности см. Ниже).

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

Ответ 2

setState не возвращает обещание. Скорее всего, это пустая функция.

Ответ 3

Вместо использования обещания для вызова оповещения после завершения setState используйте вместо этого обратный вызов

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() не всегда сразу обновляет компонент. Это может пакетировать или отложить обновление до позже. Это делает чтение this.state сразу после вызова setState() потенциальной ловушкой. Вместо этого используйте componentDidUpdate или обратный вызов setState (setState (Updater, callback)), который гарантированно сработает после применения обновления.

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

так что вы можете использовать setState(updater, callback) для выполнения кода после изменения состояния, чтобы быть на стороне сохранения

Ответ 6

Если вы хотите использовать обещание... другое решение может быть

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"))}