反应spring useTransition状态更新修改退出组件答案

【问题标题】：React spring useTransition state updates modifying exiting component反应spring useTransition状态更新修改退出组件
【发布时间】：2021-02-13 01:05:49
【问题描述】：

我正在使用 react-spring 为文本列表中的过渡设置动画。我的动画目前看起来像这样：

如您所见，现有组件中的文本也在更新，而我希望它保持不变。

这是我正在尝试的：

import {useTransition, animated} from 'react-spring'
import React from 'react'

function useInterval(callback, delay) {
  const savedCallback = React.useRef();

  // Remember the latest callback.
  React.useEffect(() => {
    savedCallback.current = callback;
  }, [callback]);

  // Set up the interval.
  React.useEffect(() => {
    let id = setInterval(() => {
      savedCallback.current();
    }, delay);
    return () => clearInterval(id);
  }, [delay]);
}

function App() {
  const [copyIndex, setCopyIndex] = React.useState(0);
  const transitions = useTransition(copyIndex, null, {
    from: { opacity: 0, transform: 'translate3d(0,100%,0)', position: 'absolute'},
    enter: { opacity: 1, transform: 'translate3d(0,0,0)' },
    leave: { opacity: 0, transform: 'translate3d(0,-50%,0)' }
  });
  const copyList = ["hello", "world", "cats", "dogs"];

  useInterval(() => {
    setCopyIndex((copyIndex + 1) % copyList.length);
    console.log(`new copy index was ${copyIndex}`)
  }, 2000);
  return (
    transitions.map(({ item, props }) => (
      <animated.div style={props} key={item}>{copyList[copyIndex]}</animated.div>
    ))
  )
}

export default App;

关于如何让它按需要工作的任何想法？非常感谢！

【问题讨论】：

标签： reactjs react-spring

【解决方案1】：

让过渡来管理您的元素。使用元素而不是索引。像这样的：

const transitions = useTransition(copyList[copyIndex], item => item, {

...

transitions.map(({ item, props }) => (
  <animated.div style={props} key={item}>{item}</animated.div>
))

【讨论】：