Hi there, I have an issue where my custom drag layer is rendering both with my custom and HTML defined style. At the same time I am being warned that "setState cannot be called during an update transition".
Here's my 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);
Here's the warning:
Warning: setState(...): Cannot update during an existing state transition (such as within
render
or another component's constructor). Render methods should be a pure function of props and state; constructor side-effects are an anti-pattern, but can be moved tocomponentWillMount
.
I'm wondering if this is an error on my end or on the end of the library.
Thanks!
What does the code for ItemDragPreview look like? I ran into this problem when trying to render a DragSource component.
Make sure ItemDragPreview isnt also a DragSource. If you're managing state within ItemDragPreview, try disabling that too. Basically shave everything off EXCEPT the html/jsx within that component(s). Start with that clean slate, then add things back to it one by one.
Turns out I had to change the drag preview in the connector as well. All good now
I have this problem too, what do you mean "in the connector"?
Most helpful comment
What does the code for ItemDragPreview look like? I ran into this problem when trying to render a DragSource component.
Make sure ItemDragPreview isnt also a DragSource. If you're managing state within ItemDragPreview, try disabling that too. Basically shave everything off EXCEPT the html/jsx within that component(s). Start with that clean slate, then add things back to it one by one.