Question

我在一条索引状态数组的路由中。单击按钮时，我想删除该状态为无效的项目。在执行此操作之前，我想回到另一条不使用该物品的路线。我这样做是为了避免索引不再存在的项目时出现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.push而不是history.goBack找到了解决方案：

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

似乎history.push是同步的，而goBack是异步的。

等待反应路由器的历史记录.go返回完成

1 个答案: