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

Question

我使用gsap来创建动画。

单击该按钮时，将创建气泡动画。

动画完成后会自行销毁。

我认为问题是在React component使用地图，但我找不到其他情况

以下是我的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>
);

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