javascript - React+gsap 使用随机动画元素组完成后无法工作？

Question

我使用 gsap 创建动画。

单击按钮时会创建气泡动画。

动画完成后会自行销毁。

我认为问题是在 React 组件 中使用 map ，但我找不到其他案例

这是我的 React 代码和 js fiddle 示例:

https://jsfiddle.net/xiaowang/ueqsg83j/58/

const { useState, useEffect, useRef } = React;

gsap.registerPlugin(MotionPathPlugin)

const Bubble = ({ onClose, data }) => {
    const pointRef = useRef(null)
    useEffect(() => {
    const path = []
    let offsetY = 0
    for(let i = 0; i < 10; i++) {
      const y = offsetY - Math.floor(Math.random() * 20 + 30)
      offsetY = y
      path.push({ x: Math.floor(Math.random() * 40 - 20), y })
    }
    gsap.to(pointRef.current, 5, {
      motionPath: {
        path,
        type: 'cubic'
      },
      onComplete: () => onClose()
    })
    return () => {}
  }, [])
    return (<span className="bubble" ref={pointRef}>{data.id}</span>)
}

const App = () => {
    const [count, setCount] = useState(0)
  const [bubbles, setBubbles] = useState([])

    const handleCreate = () => {
    setBubbles([...bubbles, {id: count}])
    setCount(count + 1)
  }

  const handleClose = index => {
    const newBubbles = [...bubbles]
    newBubbles.splice(index, 1)
    setBubbles(newBubbles)
  }

  return (
    <div className="wrap">
      {
        bubbles.map((item, index) => (
            <Bubble
            key={item.id}
            data={item}
            onClose={() => handleClose(index)} />
        ))
      }
      <button type="button" onClick={handleCreate}>Click Me</button>
    </div>
  )
}

ReactDOM.render(<App />, document.getElementById('app'))

Answer 1

不确定这会有多大帮助，但我已将您的代码移至沙箱，因为我在 jsfiddle 上找不到控制台，并对代码做了一些小修改:

https://codesandbox.io/s/react-and-gsap-issue-7tkrd

主要变化是。

将handleClose实现更改为简单的过滤器:

const handleClose = id => () => {
    setBubbles(prev => prev.filter(bubble => bubble.id !== id));
  };

改变了我们调用它的方式(以及一般渲染):

return (
    <div className="wrap">
      {bubbles.map(item => (
        <Bubble key={item.id} data={item} onClose={handleClose(item.id)} />
      ))}
      <button type="button" onClick={handleCreate}>
        Click Me
      </button>
    </div>
  );

如果我正确理解你的问题，它已经解决了这个问题，并且我认为问题在于你如何使用拼接。希望这会有所帮助。