Блог

Это родительский компонент.

 export default function CanvasPanel(props) {
  const [sketchCoordinates, setSketchCoordinates] = useState([]);

  useEffect(() => {
    console.log(sketchCoordinates);
  }, [sketchCoordinates]);

  const onAddPoint = function (mousePos) {
    setSketchCoordinates([
      ...sketchCoordinates,
      { x: mousePos.x, y: mousePos.y }
    ]);
  };

  const onPrintObject = (toPrint) => {
    console.log(toPrint);
  };

  return (
    <div className="canvas-panel">
      Points:
      <hr />
      {sketchCoordinates.join(", ")}
      <Canvas
        sketchCurveCoordinates={sketchCoordinates}
        addPoint={onAddPoint}
        printObject={onPrintObject}
      />
      <Sidepanel createPoint={onAddPoint} />
    </div>
  );
}
  

Это дочерний компонент

 export default function Canvas(props) {
  const getMousePos = function (event) {
    const offset = canvasRef.current.getBoundingClientRect();
    return {
      x: event.clientX - offset.left,
      y: event.clientY - offset.top
    };
  };

  const handleOnMouseUp = (event) => {
    const mousePos = getMousePos(event);
    props.printObject(mousePos);
    props.addPoint(mousePos);
  };

  return (
    <div className="canvas-container">
      <PureCanvas
        handleOnMouseUp={handleOnMouseUp}
      />
    </div>
  );
};
  

Это компонент PureCanvas

 export default class PureCanvas extends Component {
  shouldComponentUpdate() {
    return false;
  }

  render() {
    return (
      <canvas
        className="canvas"
        width="750"
        height="500"
        onMouseUp={this.props.handleOnMouseUp}
      ></canvas>
    );
  }
}
  

Код неполон, поскольку я удалил все материалы, связанные с canvas, потому что на самом деле это не имеет значения, но этого достаточно, чтобы объяснить и воспроизвести поведение. Функция addPoint должна добавлять объект со свойствами x и y в массив sketchCoordinates с помощью оператора spread и функции update из useState. Это работает при вызове addPoint({x: (any int), y: ({any int}) компонента CanvasPanel, но при вызове компонента Canvaspanel через props это работает только один раз. Массив добавляет первый элемент, но затем он просто заменяет этот же элемент новым, когда он должен добавить этот элемент. Итак, я знаю, что мог бы сделать это с классами, но я не могу понять, почему это не будет работать с хуками. На следующем рисунке показана консоль после некоторых обновлений массива sketchCoordinates:
Консоль

Редактировать

Пожалуйста, рассмотрите эту кодовую среду для дальнейшего просвещения.

Похоже, что это не проблема с чем-либо конкретным для перехвата: если мы заменим <canvas> на кнопку, которая просто вызывает handleOnMouseUp по щелчку, она работает так, как ожидалось.

Я подозреваю, что это не имеет ничего общего с перехватом, и, возможно, это какая-то деталь, которая была упрощена из вашего примера:

Вот изолированная среда кода с этой упрощенной версией, которая заменяет холст просто кнопкой.