ReRender Reagieren Problem

Question

Ich erstelle eine Web-App, die es dem Benutzer ermöglichen würde, mehrere Teile auf dem Bildschirm zu ziehen und zu ziehen, wobei jeder einzelne spezifische Daten enthält. Wenn der Benutzer mehr Stücke auf dem Bildschirm hinzufügen möchte, würden sie einfach auf eine Schaltfläche klicken und ein anderes Stück würde angezeigt. Ich habe die React DND (Drag and Drap) -Bibliothek benutzt, um meine Komponenten entkoppelt zu halten, und das hat bis jetzt gut funktioniert. Das Problem besteht in der dynamischen Funktion des Hinzufügens weiterer Teile auf dem Bildschirm. Momentan (im Child-Code unten) erhalte ich das alte State-Objekt, führe eine seichte Kopie durch und fusioniere das neu erstellte Objekt mit dem bereits bestehenden State-Objekt und aktualisiere den Zustand, wenn ich fertig bin. Aber jedes Mal, wenn ich diese Operation durchführen, funktioniert alles einwandfrei (neue Stücke auf dem Bildschirm erzeugt wird), bis ich gehen, um ein neues Stück und ich ge der folgende Fehler verschieben:

Cannot update during an existing state transition (such as within render). Render methods should be a pure function of props and state.

Wie kann ich gehen aus dieser immer Fehler und das Zustandsobjekt aktualisieren.

Hinweis: Die Schaltfläche (im folgenden Screenshot) zeigt die aktuelle Anzahl der Objekte im State-Objekt an. So unten Ich habe 7 Objekte in den Staat

Screenshot von App: Parent:

import React, { Component, PropTypes } from 'react'; 
    import Header from '../../components/Header/header'; 
    import Footer from '../../components/Footer/footer'; 
    import Student from '../../components/box1/box1'; 
    import Box from '../../components/box2/box2'; 
    import { DragDropContext } from 'react-dnd'; 
    import HTML5Backend from 'react-dnd-html5-backend'; 
    require('./home.css'); 


var Home = React.createClass({ 
    getDefaultProps: function(){ 

    return{ count: 3 } 
    }, 

    getInitialState: function(){ 
    return{ count: this.props.count } 
    }, 

    add: function(){ 
    this.setState({ count: this.state.count + 1 }); 
    }, 

    render() { 

    return (
     <div id="main"> 
       <Box count = {this.state.count}/> 
       <button count = {this.state.count} onClick = {this.add} > {this.state.count} </button> 
      </div> 

    ); 
    } 
}); 

export default DragDropContext(HTML5Backend)(Home); 

Kind:

import React from 'react'; 
var ItemTypes = require('../box1/Constants').ItemTypes; 
var DropTarget = require('react-dnd').DropTarget; 
var Student = require('../box1/box1'); 
import update from 'react/lib/update'; 


require('./box2.css'); 

var BoxSource = { 
    drop: function (props, monitor, component) { 
    const item = monitor.getItem(); 
    console.log(item); 
    const delta = monitor.getDifferenceFromInitialOffset(); 
    const left = Math.round(item.left + delta.x); 
    const top = Math.round(item.top + delta.y); 
    const id = item.id; 

    component.move(id, left, top); 
     } 
}; 

function collect(connect, monitor) { 
    return { 
    connectDropTarget: connect.dropTarget(), 
    didDrop: monitor.didDrop(), 
    source: monitor.getSourceClientOffset(), 
    item: monitor.getItem(), 
    drop: monitor.didDrop(), 
    result: monitor.getDropResult() 
    }; 
} 

var box2 = React.createClass({ 

    getInitialState: function() { 
    return { Students: { 
     '0': { top: 20, left: 80 }, 
     '1': { top: 180, left: 20 }, 
     '2': { top: 130, left: 20 }, 

     } 
    }; 
    }, 


componentWillReceiveProps: function(nextProps) { 
    var i = this.props.count; 
    console.log(this.state.Students); 
    var obj = update(this.state,{ 

     Students:{ 
       $merge:{ 
        [i]:{ 
        top: 10, 
        left:10 
        } 
        } 
       }   
      }); 

    this.setState(obj); 
    }, 

    move: function(id,left,top){ 
    this.setState(update(this.state,{ 
      Students:{ 
       [id]:{ 
        $merge:{ 
        left:left, 
        top: top 
        } 
        } 
       } 
      })); 
    }, 

    render:function() { 
    const { Students } = this.state; 
    var connectDropTarget = this.props.connectDropTarget; 
    return connectDropTarget(
     <div id = "box"> 
      {Object.keys(Students).map(key =>{ 
       const { left, top, title } = Students[key]; 
       return(
          <Student key = {key} id = {key} left = {left} 
          top = {top}> </Student> 
         );})} 
     </div> 
    ); 
    } 
}); 

module.exports = DropTarget(ItemTypes.STUDENT, BoxSource, collect)(box2); 

Answer 1

Es sieht aus wie das Problem in Ihrem "Student" legen könnte Komponente. Das Ausführen des obigen Codes ohne die Komponente "Student" (wie es nicht gebucht wird) funktioniert einwandfrei. Wenn Sie dies noch nicht gelöst haben, schreiben Sie bitte auch box1.js.