Salut, j'ai un problème où ma couche de glissement personnalisée est rendue à la fois avec mon style personnalisé et défini par HTML. En même temps, je suis averti que "setState ne peut pas être appelé pendant une transition de mise à jour".
Voici mon 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);
Voici l'avertissement :
Avertissement : setState(...) : Impossible de mettre à jour pendant une transition d'état existante (comme dans
render
ou le constructeur d'un autre composant). Les méthodes de rendu doivent être une pure fonction des accessoires et de l'état ; les effets secondaires du constructeur sont un anti-modèle, mais peuvent être déplacés verscomponentWillMount
.
Je me demande s'il s'agit d'une erreur de mon côté ou de la fin de la bibliothèque.
Merci!
À quoi ressemble le code pour ItemDragPreview ? J'ai rencontré ce problème en essayant de rendre un composant DragSource.
Assurez-vous que ItemDragPreview n'est pas également un DragSource. Si vous gérez l'état dans ItemDragPreview, essayez de le désactiver également. Fondamentalement, rasez tout SAUF le html/jsx dans ce(s) composant(s). Commencez par cette table rase, puis ajoutez-y les éléments un par un.
Il s'avère que j'ai également dû modifier l'aperçu du glissement dans le connecteur. Tout va bien maintenant
J'ai aussi ce problème, qu'est-ce que tu veux dire "dans le connecteur" ?
Commentaire le plus utile
À quoi ressemble le code pour ItemDragPreview ? J'ai rencontré ce problème en essayant de rendre un composant DragSource.
Assurez-vous que ItemDragPreview n'est pas également un DragSource. Si vous gérez l'état dans ItemDragPreview, essayez de le désactiver également. Fondamentalement, rasez tout SAUF le html/jsx dans ce(s) composant(s). Commencez par cette table rase, puis ajoutez-y les éléments un par un.