我有一个拖放方法的表,一切正常,除了Drop。因此,当我想将项目放入表格的单元格时,会出现由无限循环引起的错误。
如果有人能解释这个错误的原因,我将不胜感激。
import React, {Component} from 'react';
import { DropTarget } from 'react-dnd';
function collect(connect, monitor) {
return {
connectDropTarget: connect.dropTarget,
isOver: monitor.isOver,
item: monitor.getItem,
}
}
class DropCells extends Component {
state = {
tdValue: ""
};
render() {
const { connectDropTarget, isOver, item} = this.props;
const backgroundColor = isOver ? 'lightgreen' : 'white';
const dropped = isOver? this.setState({tdValue: this.props.item}): this.state.tdValue;
return connectDropTarget(
<td className="target" style={{ background: backgroundColor }}>
{dropped}
</td>
);
}
}
export default DropTarget('item', {}, collect)(DropCells);
你可以在渲染函数中调用this.setState({tdValue: this.props.item})
。每次重新渲染组件时,它都会调用this.setState,这将触发另一个渲染。