React.js拖放 - Drop上的无限循环

Posted 2021-04-20

我有一个拖放方法的表，一切正常，除了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，这将触发另一个渲染。