React-dnd: Couche de glissement personnalisée Affiche à la fois le style HTML et la couche personnalisée

Créé le 16 mai 2017  ·  3Commentaires  ·  Source: react-dnd/react-dnd

Salut, j'ai un problème où ma couche de glissement personnalisée est rendue à la fois avec mon style personnalisé et défini par HTML. En même temps, je suis averti que "setState ne peut pas être appelé pendant une transition de mise à jour".

Voici mon 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);

Voici l'avertissement :

Avertissement : setState(...) : Impossible de mettre à jour pendant une transition d'état existante (comme dans render ou le constructeur d'un autre composant). Les méthodes de rendu doivent être une pure fonction des accessoires et de l'état ; les effets secondaires du constructeur sont un anti-modèle, mais peuvent être déplacés vers componentWillMount .

Je me demande s'il s'agit d'une erreur de mon côté ou de la fin de la bibliothèque.
Merci!

Commentaire le plus utile

À quoi ressemble le code pour ItemDragPreview ? J'ai rencontré ce problème en essayant de rendre un composant DragSource.

Assurez-vous que ItemDragPreview n'est pas également un DragSource. Si vous gérez l'état dans ItemDragPreview, essayez de le désactiver également. Fondamentalement, rasez tout SAUF le html/jsx dans ce(s) composant(s). Commencez par cette table rase, puis ajoutez-y les éléments un par un.

Tous les 3 commentaires

À quoi ressemble le code pour ItemDragPreview ? J'ai rencontré ce problème en essayant de rendre un composant DragSource.

Assurez-vous que ItemDragPreview n'est pas également un DragSource. Si vous gérez l'état dans ItemDragPreview, essayez de le désactiver également. Fondamentalement, rasez tout SAUF le html/jsx dans ce(s) composant(s). Commencez par cette table rase, puis ajoutez-y les éléments un par un.

Il s'avère que j'ai également dû modifier l'aperçu du glissement dans le connecteur. Tout va bien maintenant

J'ai aussi ce problème, qu'est-ce que tu veux dire "dans le connecteur" ?

Cette page vous a été utile?
0 / 5 - 0 notes

Questions connexes

dwjohnston picture dwjohnston  ·  3Commentaires

greggigon picture greggigon  ·  4Commentaires

rubayethossain picture rubayethossain  ·  3Commentaires

dreamcog picture dreamcog  ·  4Commentaires

BrennanRoberts picture BrennanRoberts  ·  3Commentaires