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 acomponentWillMount
.
Me pregunto si esto es un error de mi parte o de la biblioteca.
¡Gracias!
¿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"?
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.