Hai, Saya memiliki masalah ketika lapisan seret khusus saya dirender dengan gaya yang ditentukan khusus dan HTML saya. Pada saat yang sama saya diperingatkan bahwa "setState tidak dapat dipanggil selama transisi pembaruan".
Ini kode saya:
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);
Berikut peringatannya:
Peringatan: setState(...): Tidak dapat memperbarui selama transisi status yang ada (seperti dalam
render
atau konstruktor komponen lain). Metode render harus merupakan fungsi murni dari props dan state; efek samping konstruktor adalah anti-pola, tetapi dapat dipindahkan kecomponentWillMount
.
Saya bertanya-tanya apakah ini kesalahan saya atau di ujung perpustakaan.
Terima kasih!
Seperti apa kode untuk ItemDragPreview? Saya mengalami masalah ini ketika mencoba membuat komponen DragSource.
Pastikan ItemDragPreview juga bukan DragSource. Jika Anda mengelola status dalam ItemDragPreview, coba nonaktifkan juga. Pada dasarnya mencukur semuanya KECUALI html/jsx di dalam komponen itu. Mulailah dengan yang bersih, lalu tambahkan semuanya kembali satu per satu.
Ternyata saya harus mengubah pratinjau seret di konektor juga. Semuanya baik-baik saja sekarang
Saya punya masalah ini juga, apa maksudmu "di konektor"?
Komentar yang paling membantu
Seperti apa kode untuk ItemDragPreview? Saya mengalami masalah ini ketika mencoba membuat komponen DragSource.
Pastikan ItemDragPreview juga bukan DragSource. Jika Anda mengelola status dalam ItemDragPreview, coba nonaktifkan juga. Pada dasarnya mencukur semuanya KECUALI html/jsx di dalam komponen itu. Mulailah dengan yang bersih, lalu tambahkan semuanya kembali satu per satu.