React-dnd: Capa de arrastre personalizada Muestra tanto el estilo HTML como la capa personalizada

Creado en 16 may. 2017  ·  3Comentarios  ·  Fuente: react-dnd/react-dnd

Hola, tengo un problema en el que mi capa de arrastre personalizada se representa tanto con mi estilo personalizado como con el definido en HTML. Al mismo tiempo, se me advierte que "no se puede llamar a setState durante una transición de actualización".

Aquí está mi código:

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

Aquí está la advertencia:

Advertencia: setState(...): No se puede actualizar durante una transición de estado existente (como dentro de render o el constructor de otro componente). Los métodos de renderizado deben ser una función pura de accesorios y estado; Los efectos secundarios del constructor son un antipatrón, pero se pueden mover a componentWillMount .

Me pregunto si esto es un error de mi parte o de la biblioteca.
¡Gracias!

Comentario más útil

¿Qué aspecto tiene el código para ItemDragPreview? Me encontré con este problema al intentar renderizar un componente DragSource.

Asegúrese de que ItemDragPreview no sea también un DragSource. Si está administrando el estado dentro de ItemDragPreview, intente deshabilitarlo también. Básicamente, elimine todo EXCEPTO el html/jsx dentro de ese(s) componente(s). Comience con esa pizarra limpia, luego agregue las cosas una por una.

Todos 3 comentarios

¿Qué aspecto tiene el código para ItemDragPreview? Me encontré con este problema al intentar renderizar un componente DragSource.

Asegúrese de que ItemDragPreview no sea también un DragSource. Si está administrando el estado dentro de ItemDragPreview, intente deshabilitarlo también. Básicamente, elimine todo EXCEPTO el html/jsx dentro de ese(s) componente(s). Comience con esa pizarra limpia, luego agregue las cosas una por una.

Resulta que también tuve que cambiar la vista previa de arrastre en el conector. Todo bien ahora

Yo también tengo este problema, ¿a qué te refieres con "en el conector"?

¿Fue útil esta página
0 / 5 - 0 calificaciones