React ReRender Issue

Question

Je crée une application web qui permettrait à l'utilisateur de faire glisser et de faire glisser plusieurs pièces à l'écran, chacune contenant des données spécifiques. Si l'utilisateur veut ajouter plus de pièces sur l'écran, il suffit de cliquer sur un bouton, et un autre morceau apparaît. J'ai utilisé la bibliothèque React DND (Drag and Drap) pour garder mes composants découplés, et cela a bien fonctionné, jusqu'à présent. Le problème est avec la fonctionnalité dynamique d'ajouter plus de pièces à l'écran. Actuellement (dans le code enfant ci-dessous), j'obtiens l'ancien objet état, effectuant une copie superficielle, et fusionnant l'objet nouvellement créé avec l'objet état préexistant, et mettant à jour l'état une fois terminé. Mais, chaque fois que j'effectuer cette opération, tout fonctionne bien (nouvelles pièces produites à l'écran) jusqu'à ce que je vais passer une nouvelle pièce et je ge l'erreur suivante:

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

Comment puis-je obtenir de cette erreur, et ayant l'objet état mise à jour.

Remarque: Le bouton (dans la capture d'écran ci-dessous) indique le nombre actuel d'objets dans l'objet État. Donc, ci-dessous, j'ai ajouté 7 objets dans l'État

Capture d'écran de l'application: 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); 

enfant:

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

Il semble que le problème pourrait poser à l'intérieur de votre "étudiant" composant. L'exécution du code ci-dessus sans le composant "Etudiant" (car elle n'est pas publiée) fonctionne correctement. Si vous ne l'avez pas encore résolu, veuillez également poster box1.js.