React-dnd: Camada de arrastar personalizada Mostra o estilo HTML e a camada personalizada

Criado em 16 mai. 2017  ·  3Comentários  ·  Fonte: react-dnd/react-dnd

Olá, estou com um problema em que minha camada de arrastar personalizada está renderizando tanto com meu estilo personalizado quanto definido em HTML. Ao mesmo tempo, estou sendo avisado de que "setState não pode ser chamado durante uma transição de atualização".

Aqui está o meu 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);

Aqui está o aviso:

Aviso: setState(...): Não é possível atualizar durante uma transição de estado existente (como em render ou no construtor de outro componente). Os métodos de renderização devem ser uma função pura de props e state; os efeitos colaterais do construtor são um antipadrão, mas podem ser movidos para componentWillMount .

Eu estou querendo saber se isso é um erro do meu lado ou no final da biblioteca.
Obrigado!

Comentários muito úteis

Como é o código para ItemDragPreview? Eu me deparei com esse problema ao tentar renderizar um componente DragSource.

Certifique-se de que ItemDragPreview também não seja um DragSource. Se você estiver gerenciando o estado no ItemDragPreview, tente desativá-lo também. Basicamente, raspe tudo, EXCETO o html/jsx dentro desse(s) componente(s). Comece com essa lousa limpa e adicione as coisas de volta uma a uma.

Todos 3 comentários

Como é o código para ItemDragPreview? Eu me deparei com esse problema ao tentar renderizar um componente DragSource.

Certifique-se de que ItemDragPreview também não seja um DragSource. Se você estiver gerenciando o estado no ItemDragPreview, tente desativá-lo também. Basicamente, raspe tudo, EXCETO o html/jsx dentro desse(s) componente(s). Comece com essa lousa limpa e adicione as coisas de volta uma a uma.

Acontece que eu também tive que alterar a visualização de arrastar no conector. Tudo bem agora

Eu também tenho esse problema, o que você quer dizer com "no conector"?

Esta página foi útil?
0 / 5 - 0 avaliações

Questões relacionadas

user1736 picture user1736  ·  3Comentários

greggigon picture greggigon  ·  4Comentários

dwjohnston picture dwjohnston  ·  3Comentários

dreamcog picture dreamcog  ·  4Comentários

Vadorequest picture Vadorequest  ·  4Comentários