react-spring与useContext

编程问答 2022-07-21

问题描述

我一直在尝试使用带有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,} = 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>
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

animationanimationreact-springreactjsreactjsuse-context