useEffect zu componentDidUpdate transferieren?

[terra75]

Hallo zusammen,

arbeite seit einiger Zeit mit ReactJS aber bin da noch nicht so ganz drin. Vieles lese ich mir von anderen Beiträgen ab und komme so ganz gut zurecht.
Habe auch nebenher gelesen, das Klassen mehr Vorzuge haben als Funktionen und wollte daher ein Projekt Klassenbasiert umschreiben um zu schauen, wie ich damit klar komme und welche Möglichkeiten sich noch bieten.

Im großen und ganzem handelt es sich um ein sehr simplen Bildbearbeiter, der erstmal nur das eingelesene Foto mit der Maus hin und her schieben soll.
Eine Hauptkomponente ist die in dem useEffect erstellten Script:

 useEffect(() => {
                    const mouseup = () => {
                        setPanning(false);
                    };
        
                    const mousemove = (event) => {
                        if (isPanning) {
                            setPosition({
                                ...position,
                                x: Math.round(position.x + event.clientX - position.oldX),
                                y: Math.round(position.y + event.clientY - position.oldY),
                                oldX: event.clientX,
                                oldY: event.clientY,
                            });
                        }
                    };
        
                    window.addEventListener('mouseup', mouseup);
                    window.addEventListener('mousemove', mousemove);
        
                    return () => {
                        window.removeEventListener('mouseup', mouseup);
                        window.removeEventListener('mousemove', mousemove);
                    };
                });

Im Ursprünglichem Script funktioniert dieser ohne Probleme. Füge ich das ganze aber in den Klassen Updater ein und passe alles etwas an, dann haut der mir den Fehler raus, das "X" undefiniert ist.

Unten etwas mehr Code um den Zusammenhang zu verstehen.

export default class PicEditor extends Component {
    constructor(props) {
        super(props);

        this.state = {
            panning: false,
            image: {
                width: 0,
                height: 0,
                src: null
            },
            position: {
                oldX: 0,
                oldY: 0,
                x: 0,
                y: 0,
                z: 1,
            }
        };
    };

    componentDidMount() {
        // noch nix vorhanden.
    };

    componentDidUpdate() {

        const mouseup = () => {
            this.setState({ panning: false });
        };

        const mousemove = (event) => {
            if (this.state.panning) {
                this.setState({
                    position: {
                        x: Math.round(this.position.x + event.clientX - this.position.oldX),
                        y: Math.round(this.position.y + event.clientY - this.position.oldY),
                        oldX: event.clientX,
                        oldY: event.clientY,
                    },
                });
            }
        };

        window.addEventListener('mouseup', mouseup);
        window.addEventListener('mousemove', mousemove);

    };

    onMouseDown = (e) => {
        e.preventDefault();
        this.setState({
            panning: true,
            position: {
                oldX: e.clientX,
                oldY: e.clientY
            }
        })
    };

Kann mir da wer weiterhelfen, das ich allgemein verstehe, was ich falsch mache?
In der Konsole wird mir folgender Fehler ausgespuckt: Cannot read properties of undefined (reading 'x') at mousemove.

Lieben Gruß,
Mark

 

[mo]

Die Fehlermeldung "Cannot read properties of undefined (reading 'x') at mousemove" bedeutet, dass die Variable this.position im mousemove-Ereignis-Handler nicht definiert ist.

Dies liegt daran, dass this.position nicht im Zustand der Komponente definiert ist, sondern die Positionseigenschaften (x, y, z) innerhalb eines Objekts namens position im Zustand verschachtelt sind. Sie sollten daher die Referenz auf this.position in dem mousemove-Ereignis-Handler auf this.state.position aktualisieren.

Hier ist der korrigierte mousemove-Ereignis-Handler:

const mousemove = (event) => {
  if (this.state.panning) {
    this.setState({
      position: {
        x: Math.round(this.state.position.x + event.clientX - this.state.position.oldX),
        y: Math.round(this.state.position.y + event.clientY - this.state.position.oldY),
        oldX: event.clientX,
        oldY: event.clientY,
      },
    });
  }
};

Mit dieser Korrektur sollte der Fehler behoben sein, und der mousemove-Ereignis-Handler sollte in der Lage sein, die Position des Bildes im Zustand der Komponente zu aktualisieren.