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 paracomponentWillMount
.
Eu estou querendo saber se isso é um erro do meu lado ou no final da biblioteca.
Obrigado!
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"?
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.