Дождитесь истории реактивного маршрутизатора. Вернуться к завершению.

Question

Я нахожусь на маршруте, индексирующем массив в состоянии. При нажатии кнопки я хочу удалить этот элемент из состояния. Перед тем как это сделать, я хочу go вернуться к другому маршруту, который не использует этот элемент. Я делаю это, чтобы избежать ошибки TypeError при индексировании элемента, который больше не существует.

Можно ли дождаться завершения изменения маршрута перед обновлением состояния? Похоже, что с useHistory нет возможности обещать.

Минимальный пример:

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter, Switch, Route, useHistory } from 'react-router-dom'

class App extends Component {
  constructor (props) {
    super(props)
    this.state = {
      stuff: [{
        message: 'hello'
      }]
    }
  }

  componentDidMount () {
    console.log('mounted')
  }

  render () {
    return (
      <Switch>
        <Route path='/1'>
          <Child
            stuff={this.state.stuff} callback={() => {
              this.props.history.goBack()
              this.setState({
                stuff: []
              })
            }}
          />
        </Route>
        <Route path='/'>
          <button onClick={() => this.props.history.push('/1')}>
            Go to friend
          </button>
          home
        </Route>
      </Switch>
    )
  }
}

const Child = ({ callback, stuff }) =>
  <>
    <button onClick={callback}>
      Go back
    </button>
    {stuff[0].message} friend
  </>

const withUseHistory = (Component) => {
  return function WrappedComponent (props) {
    const history = useHistory()
    return <Component {...props} history={history} />
  }
}

const AppWithHistory = withUseHistory(App)

const wrapper = document.getElementById('root')
ReactDOM.render(
  <BrowserRouter>
    <AppWithHistory />
  </BrowserRouter>,
  wrapper)

Answer 1

Я нашел решение, используя history.pu sh вместо history.goBack:

this.props.history.push('/')
this.setState({
  stuff: []
})

Кажется, что history.pu sh синхронный, а goBack - asyn c.