Javascript 使用带有react和p5的构造函数，得到'；无法读取属性'；冲程'；未定义的'；

标题说明了一切，我无法让它工作。感谢您的帮助。我还没有反应过来。 我试图在一个数组中“绑定”多个气泡，使它们之间形成碰撞系统，但无法通过此未定义的错误：

import React，{Component}来自“React”；
从“react-p5”导入草图；
从“../assests/cyber.png”导入徽标；
无功转速=15；
var乘数=0.3
var-img；
风险值=[]；
班级卡{
建造师（p5）{
this.x=Math.floor（Math.random（）*Math.floor（window.innerWidth））；
this.y=Math.floor（Math.random（）*Math.floor（window.innerHeight））；
this.display=（）=>{
p5.冲程（255）；
p5.noFill（）；
p5.椭圆（这个.x，这个.y，50,50）；
};
this.move=（）=>{
this.x=this.x+Math.random（）*Math.floor（1）；
this.y=this.y+Math.random（）*Math.floor（1）；
}
}
};
导出默认类后台扩展组件{
x=50；
y=50；
预载=p5=>{
console.log（'preload'）；
}
设置=（p5，canvasParentRef）=>{
img=p5.loadImage（'../assests/cyber.png'）；
p5.createCanvas（window.innerWidth，window.innerHeight）.parent（canvasParentRef）；//使用parent在这个ref中渲染画布（没有p5在组件外部渲染这个画布）
对于（var i=0；i{
p5.清除（）
p5.图像（img，this.x+100，this.y，150150）；
p5.图像（img，this.x+200，this.y，150150）；
p5.图像（img，this.x+300，this.y，150150）；
p5.椭圆（这个.x，这个.y，150150）；
对于这条线上的（var i=0；i）：

            Bubbles[i] = new Card();

您没有将
p5
变量传递到卡构造函数中。您可以通过将行更改为：

            Bubbles[i] = new Card(p5);

@Andrei LucianRadu很高兴听到这个消息！请在有时间的时候将答案标记为正确：）
            Bubbles[i] = new Card(p5);