React.js Drag and Drop - бесконечные циклы при падении

Question

У меня есть таблица с методом Drag and Drop, и все отлично работает, кроме 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);

Answer 1

У вас есть вызов this.setState({tdValue: this.props.item}) внутри вашей функции рендеринга.Каждый раз, когда ваш компонент выполняет рендеринг, он вызывает this.setState, который запускает другой рендеринг.