React-dnd: Benutzerdefinierte Drag-Ebene Zeigt sowohl den HTML-Stil als auch die benutzerdefinierte Ebene an

Erstellt am 16. Mai 2017  ·  3Kommentare  ·  Quelle: react-dnd/react-dnd

Hallo, ich habe ein Problem, bei dem meine benutzerdefinierte Drag-Ebene sowohl mit meinem benutzerdefinierten als auch mit meinem HTML-definierten Stil gerendert wird. Gleichzeitig werde ich gewarnt, dass "setState während eines Update-Übergangs nicht aufgerufen werden kann".

Hier ist mein Code:

import React from 'react';
import PropTypes from 'prop-types';
import { DragLayer } from 'react-dnd';

import ItemDragPreview from './ItemDragPreview';

const layerStyles = {
    position: 'fixed',
    pointerEvents: 'none',
    zIndex: 200000
};

function getItemStyles(props){
    const {initialOffset, currentOffset} = props;

     if (!initialOffset || !currentOffset) {
        return {
        display: 'none'
        };
    }

    let {x,y} = currentOffset;
    const transform = `translate(${x}px,${y}px)`;
    return{
        transform
    };
}

class CustomDragLayer extends React.Component{
    static propTypes = {
        item: PropTypes.object,
        itemType: PropTypes.string,
        initialOffset: PropTypes.shape({
            x: PropTypes.number.isRequired,
            y: PropTypes.number.isRequired
        }),
        currentOffset: PropTypes.shape({
            x: PropTypes.number.isRequired,
            y: PropTypes.number.isRequired
        }),
        isDragging: PropTypes.bool.isRequired,
    }

    renderItem(type,item){
        return (<ItemDragPreview ruleitem={item}/>);
    }

    render(){
        const {item,itemType,isDragging} = this.props;
        if(!isDragging){
            return null;
        }

        return (
            <div style={layerStyles}>
                <div style={getItemStyles(this.props)}>
                    {this.renderItem(itemType,item)}
                </div>
            </div>
        );
    }

}

let collect = monitor =>{
    return {
        item: monitor.getItem(),
        itemType: monitor.getItemType(),
        currentOffset: monitor.getSourceClientOffset(),
        initialOffset: monitor.getInitialSourceClientOffset(),
        isDragging: monitor.isDragging()
    };
}

export default DragLayer(collect)(CustomDragLayer);

Hier ist die Warnung:

Warnung: setState(...): Kann während eines bestehenden Zustandsübergangs (wie innerhalb von render oder dem Konstruktor einer anderen Komponente) nicht aktualisiert werden. Rendering-Methoden sollten eine reine Funktion von Requisiten und Status sein; Konstruktor-Nebeneffekte sind ein Anti-Muster, können aber nach componentWillMount verschoben werden.

Ich frage mich, ob dies ein Fehler meinerseits oder am Ende der Bibliothek ist.
Danke!

Hilfreichster Kommentar

Wie sieht der Code für ItemDragPreview aus? Ich bin auf dieses Problem gestoßen, als ich versuchte, eine DragSource-Komponente zu rendern.

Stellen Sie sicher, dass ItemDragPreview nicht auch eine DragSource ist. Wenn Sie den Status in ItemDragPreview verwalten, versuchen Sie auch, dies zu deaktivieren. Grundsätzlich alles AUSSER dem HTML/jsx innerhalb dieser Komponente(n) abschneiden. Beginnen Sie mit dieser sauberen Tafel und fügen Sie dann die Dinge nacheinander hinzu.

Alle 3 Kommentare

Wie sieht der Code für ItemDragPreview aus? Ich bin auf dieses Problem gestoßen, als ich versuchte, eine DragSource-Komponente zu rendern.

Stellen Sie sicher, dass ItemDragPreview nicht auch eine DragSource ist. Wenn Sie den Status in ItemDragPreview verwalten, versuchen Sie auch, dies zu deaktivieren. Grundsätzlich alles AUSSER dem HTML/jsx innerhalb dieser Komponente(n) abschneiden. Beginnen Sie mit dieser sauberen Tafel und fügen Sie dann die Dinge nacheinander hinzu.

Es stellte sich heraus, dass ich auch die Ziehvorschau im Connector ändern musste. Alles gut jetzt

Ich habe dieses Problem auch, was meinst du mit "im Stecker"?

War diese Seite hilfreich?
0 / 5 - 0 Bewertungen