javascript - React Konva - 代码突然运行

Question

我正在尝试在 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>
        );
      }
}

Answer 1

我没有看到 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)
  }

selectedRectangle 成为箭头函数内的局部变量，当您尝试 console.log 它时，您超出了它的范围。您将需要正确定义此变量。