Javascript 反应+；gsap使用随机动画元素组可以'；当它完成时，它不能工作吗？

我使用

gsap

创建动画

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

动画完成后会自我毁灭

我想问题是在

React组件中使用map，但我找不到其他案例

下面是我的React代码和js fiddle示例：


const{useState，useffect，useRef}=React；
gsap.registerPlugin（MotionPathPlugin）
常量气泡=（{onClose，data}）=>{
const pointRef=useRef（null）
useffect（（）=>{
常量路径=[]
设offsetY=0
for（设i=0；i<10；i++）{
常量y=offsetY-Math.floor（Math.random（）*20+30）
offsetY=y
push（{x:Math.floor（Math.random（）*40-20），y}）
}
gsap.to（点参考电流，5{
运动路径：{
路径
类型：“立方”
},
onComplete:（）=>onClose（）
})
return（）=>{}
}, [])
返回（{data.id}）
}
常量应用=（）=>{
const[count，setCount]=useState（0）
常量[bubbles，setubbles]=useState（[]）
常量handleCreate=（）=>{
setubbles（[…气泡，{id:count}]）
设置计数（计数+1）
}
const handleClose=索引=>{
常量新气泡=[…气泡]
新气泡.拼接（索引1）
立管气泡（新气泡）
}
返回(
{
泡泡图（（项目，索引）=>(
handleClose（索引）}/>
))
}
点击我
)
}
ReactDOM.render（，document.getElementById（'app'））
我不确定这会有多大帮助，但我已经将您的代码移到了沙箱中，因为我在JSFIDLE上找不到控制台，并对代码进行了一些小的修改：


主要的变化是

将handleClose实现更改为简单筛选器：

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

更改了调用它的方式（以及一般的呈现方式）：

返回(
{bubbles.map（项=>(
))}
点击我
);

如果我对你的问题理解正确的话，它已经解决了这个问题，我认为问题在于你是如何使用拼接的。希望这会有所帮助。
根据需要的气泡数量，在开始时创建一组气泡（100个或多个），然后在单击按钮时为特定的气泡设置动画可能更有意义。一次又一次地创建和销毁元素以及更改数组的大小不是很好。我打赌这样做也能解决你面临的问题。
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>
  );