Javascript React Konva-代码突然运行

我试图在React Konva中动态制作和移动矩形。问题是，有时我的代码运行得很好，有时抛出错误，有时矩形无法得到更新和正确移动

我没有遇到任何问题，直到我实现了每当矩形移动时更新状态的功能。为此，我打电话给handleDragStart和handleDragEnd。在handleDragStart中，我选择矩形并将其放入selectedrectangle变量中，然后在handleDragEnd中，我从状态中删除该矩形并添加更新的矩形

问题1-错误显示selectedRectangle仍然为空。它不会在handleDragStart函数中更新，而应该在该函数中更新

问题2-当我移动矩形时，它们会在舞台上任意移动。当我绘制新矩形时，会将其移回原始绘制位置

请帮我找到问题并解决它

var index;
var selectedRectangle = null;

export default class MyRectangle extends React.Component {        
    constructor(props) {
        super(props);

        this.state = {
          shapes : [],
          isDrawing : false,
          isDrawingMode : true,
          image : null,
        }

        this.handleDragStart = this.handleDragStart.bind (this);
        this.handleDragEnd = this.handleDragEnd.bind (this);
      }

      componentDidMount() {
        const image = new window.Image();
        image.src = this.props.image;

        image.onload = () => {
          this.setState ({
            image: image
          });
        };
      }

      handleClick = (e) => {
        if (!this.state.isDrawingMode) {
          return;
        }

        if (this.state.isDrawing) {
          this.setState ({
            isDrawing: !this.state.isDrawing,
          })

          return;
        }

        const newShapes = this.state.shapes.slice();
        newShapes.push ({
          x: e.evt.layerX,
          y: e.evt.layerY,
          width: 0,
          height: 0,
        });

        this.setState ({
          isDrawing: true,
          shapes: newShapes,
        });
      }

      handleMouseMove = (e) => {
        if (!this.state.isDrawingMode) return;

        const mouseX = e.evt.layerX;
        const mouseY = e.evt.layerY;

        if (this.state.isDrawing) {

          const currShapeIndex = this.state.shapes.length - 1;
          const currShape = this.state.shapes[currShapeIndex];
          const newWidth = mouseX - currShape.x;
          const newHeight = mouseY - currShape.y;

          const newShapesList = this.state.shapes.slice();
          newShapesList[currShapeIndex] = {
            x: currShape.x,
            y: currShape.y,
            width: newWidth,
            height: newHeight
          }

          this.setState ({
            shapes: newShapesList,
          });
        }
      }

      handleCheckboxChange = () => {
        this.setState ({
          isDrawingMode: !this.state.isDrawingMode,
        })
      }

      handleDragStart(e) {
        this.state.shapes.map ((sh) => {
          if ((sh.x < e.evt.layerX) && (sh.y < e.evt.layerY) && ((sh.x + sh.width) > e.evt.layerX) && ((sh.y + sh.height) > e.evt.layerY)) {
            selectedRectangle = sh;
          }
        });

        console.log(selectedRectangle)
      }

      handleDragEnd (e) {

        console.log(selectedRectangle)
        index = this.state.shapes.indexOf (selectedRectangle);
        this.state.shapes.splice(index, 1);
        console.log(index);

        selectedRectangle.x = e.target._lastPos.x;
        selectedRectangle.y = e.target._lastPos.y;

        this.setState({shapes : [...this.state.shapes, selectedRectangle]});
        console.log(this.state.shapes)       
      }

      render() {
       return (
          <div>
            <input type = "checkbox" checked = {this.state.isDrawingMode} onChange = {this.handleCheckboxChange} />
            <label>Drawing Mode</label>

            <Stage 
                ref = 'stage'
                width = {window.innerWidth} 
                height = {window.innerHeight} 
                onContentClick = {this.handleClick} 
                onContentMouseMove = {this.handleMouseMove}
            >
              <Layer ref = 'layer'>
                <Image image = {this.state.image}   />

                {this.state.shapes.map((shape) => {
                  return (
                    <Group>
                      <Rect
                        x = {shape.x}
                        y = {shape.y}
                        width = {shape.width}
                        height = {shape.height}
                        isDrawingMode = {this.state.isDrawingMode}
                        strokeWidth = {2}
                        draggable = "true"
                        stroke="yellow"
                        fill="green"
                        opacity={0.4}
                        onDragStart = {(e) => this.handleDragStart(e)}
                        onDragEnd = {(e) => this.handleDragEnd(e)}
                      />                                              
                    </Group >
                  );
                })} 

              </Layer>
            </Stage>
            <button onClick={this.sendData}>Submit</button>
          </div>
        );
      }
}

var指数；
var selectedlectangle=null；
导出默认类MyRectangle扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
形状：[]，
isDrawing:错误，
isDrawingMode:true，
图像：空，
}
this.handleDragStart=this.handleDragStart.bind（this）；
this.handleDragEnd=this.handleDragEnd.bind（this）；
}
componentDidMount（）{
const image=new window.image（）；
image.src=this.props.image；
image.onload=（）=>{
这是我的国家({
图像：图像
});
};
}
handleClick=（e）=>{
如果（！this.state.isDrawingMode）{
返回；
}
if（this.state.isDrawing）{
这是我的国家({
isDrawing:！this.state.isDrawing，
})
返回；
}
const newShapes=this.state.shapes.slice（）；
新闻形态({
x:e.evt.layerX，
y:e.evt.layerY，
宽度：0，
高度:0,，
});
这是我的国家({
isDrawing:是的，
形状：新闻形状，
});
}
手机移动=（e）=>{
如果（！this.state.isDrawingMode）返回；
常数mouseX=e.evt.layerX；
const mouseY=e.evt.layerY；
if（this.state.isDrawing）{
const currShapeIndex=this.state.shapes.length-1；
const currShape=this.state.shapes[currShapeIndex]；
const newWidth=mouseX-currShape.x；
const newHeight=mouseY-currShape.y；
const newShapesList=this.state.shapes.slice（）；
新闻形状列表[当前形状索引]={
x:currShape.x，
咖喱，咖喱，
宽度：newWidth，
高度：新高度
}
这是我的国家({
形状：新闻形状列表，
});
}
}
handleCheckboxChange=（）=>{
这是我的国家({
isDrawingMode:！this.state.isDrawingMode，
})
}
手提式起动装置（e）{
this.state.shapes.map（（sh）=>{
如果（（sh.xe.evt.layerX）和（（sh.y+sh.height）>e.evt.layerX））{
selectedRectangle=sh；
}
});
console.log（selectedRectangle）
}
手把手（e）{
console.log（selectedRectangle）
index=this.state.shapes.indexOf（selectedRectangle）；
这个.状态.形状.拼接（索引，1）；
控制台日志（索引）；
选择的射角x=e.target.\u最后位置x；
选择的角度y=e.target.\u最后位置y；
this.setState（{shapes:[…this.state.shapes，selectedlectangle]}）；
console.log（this.state.shapes）
}
render（）{
返回(
绘图模式
{this.state.shapes.map（（shape）=>{
返回(
这个.handleDragStart（e）}
onDragEnd={（e）=>this.handleDragEnd（e）}
/>                                              
);
})} 
提交
);
}
}

我看不到在哪里定义了

selectedRectangle

，所以我假设您没有明确定义它。因此，这里

  handleDragStart(e) {
    this.state.shapes.map ((sh) => {
      if ((sh.x < e.evt.layerX) && (sh.y < e.evt.layerY) && ((sh.x + sh.width) > e.evt.layerX) && ((sh.y + sh.height) > e.evt.layerY)) {
        selectedRectangle = sh;
      }
    });

    console.log(selectedRectangle)
  }

handleDragStart（e）{
this.state.shapes.map（（sh）=>{
如果（（sh.xe.evt.layerX）和（（sh.y+sh.height）>e.evt.layerX））{
selectedRectangle=sh；
}
});
console.log（selectedRectangle）
}

---

selectedlectangle

成为箭头函数内部的局部变量，当您尝试

console.log

它时，您就超出了它的范围。您需要正确定义此变量。

很抱歉，我跳过了它。我在类声明之前全局声明了它，只是因为这个问题，但它不起作用。@Ketan它现在怎么不起作用了？你遇到了什么错误/行为？我遇到了与我在问题中所述相同的问题。在您回答之前，我已经在代码中使用selectedRectangle作为全局变量，但我忘了在这里添加代码。它表示不能将值定义为未定义。SelectedRectangle有时仍然为空。问题是错误并不总是出现。有时代码会运行smoothly@Ketan写入console.log（“已初始化”）；仅在选定范围=sh；之后；。此外，还要编写console.log（“需要”）；就在选择了Rectangle.x=e.target.\u lastPos.x；之前；。当您执行脚本时，您在控制台中看到了什么？