react-spring与useContext

Question

我一直在尝试使用带有react useContext钩子的react-spring。但是，它们似乎彼此不兼容。

我想进行一个过渡，单击一下，将淡出特定的组件，将其删除，然后淡入一个新组件。

状态的处理方式是单击，用户要转换到的值存储在状态中。然后，一旦完成淡入淡出动画，状态的另一个值也会更改，并且此值的更改会触发呈现新组件的逻辑。

我遇到的问题是无法确定反应弹簧动画何时完成。

我尝试在useSpring中使用onRest。我遇到的问题是，当react重新渲染所有组件时会调用onRest，因为我使用的是useContext，而useContext使用上下文重新渲染了所有组件，并且重新渲染会导致onRest触发，而不是等待春天的动画整理。

我尝试使用异步功能来键入使用弹簧。但是，我发现这样做的时候，调用异步函数时，上下文的当前状态没有得到反映，而是使用了一个过时的状态。

如果需要显示任何代码，我将很乐意回答任何问题，并提供有关如何解决此问题的更多信息。

索引文件中调用的

App.jsx文件是

export default function App() {
  const [progress, setProgress] = useState({
    0: undefined,
    1: undefined,
    2: undefined,
    3: undefined
  })
  const [toProgress, setToProgress] = useState()
  const [viewing, setViewing] = useState(0)
  const [toViewing, setToViewing] = useState(0)

  const updateProgress = (key, val) => {
    setProgress((prev) => {
      return { ...prev, [key]: val }
    })
  }

  const updateToProgress = (val) => {
    setToProgress(val)
  }

  const updateViewing = (val) => {
    setViewing(val)
  }

  const updateToViewing = (val) => {
    setToViewing(val)
  }

  const contextValues = {
    progress,
    updateProgress,
    toProgress,
    updateToProgress,
    viewing, 
    updateViewing,
    toViewing, 
    updateToViewing
  }

  return (
    <div className="App" >
      <AppContext.Provider value={contextValues}>
        <SideBar/>
        <MainWindow/>
      </AppContext.Provider>
    </div>
  )
}

AppContext为export default React.createContext()

选择文件（应在其中存储开关逻辑的位置）

function Selection(props) {
  const {
    progress,
    viewing,
  } = useContext(AppContext)

  const [springStyle, set, stop] = useSpring(() => ({
    from: {opacity: 1}, 
    config: {duration: 2000}
  }))

  const startTransition = callback => {
    set({to: async(next, cancel) => {
      await next({opacity: 0, config: {duration: 2000}})
      await callback()
      await console.log("We reach the transition point")
      await next({opacity: 1, config: {duration: 2000}})
    }})
  }
  

  return <animated.div style={springStyle}>
    {progress[viewing] ? 
      <ChosenTile 
       startTransition={startTransition}
      />: 
      <TileChoices 
       startTransition={startTransition}
      />}
  </animated.div>
}