React ReRender Issue

Question

Kullanıcının tek tek belirli verileri tutan, ekranda birçok parçayı sürükleyip sürüklemesine izin veren bir web uygulaması oluşturuyorum. Kullanıcı ekrana daha fazla parça eklemek isterse, bir düğmeye basar ve başka bir parça görünür. Bileşenleri ayrıştırmak için React DND (Sürükle ve Drap) kitaplığını kullandım ve şu ana kadar iyi çalıştı. Sorun, ekranda daha fazla parça eklemenin dinamik özelliği. Şu anda (aşağıdaki Çocuk kodunda), eski durum nesnesini alıyorum, sığ bir kopya gerçekleştiriyorum ve yeni oluşturulan nesneyi önceden var olan durum nesnesiyle birleştiriyorum ve bittiğinde durumu güncelliyorum.

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

nasıl bu işten alma hakkında gidebilir: Ben aşağıdaki hata yeni bir parça ve ben ge taşımak gitmek kadar ben bu işlemi gerçekleştirmek her zaman, her şey iyi (ekranda oluşturulan yeni parçalar) çalışır hata ve durum nesnesinin güncellenmesi.

Not: Buton (aşağıdaki ekran görüntüsünde), State nesnesindeki nesnelerin miktarının geçerli sayısını gösterir. Veli:

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); 

Çocuk:

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

Sorun "Öğrenci" içeride yattı ediyor gibi ben Devletin App

Ekran Görüntüsü içine 7 nesneleri eklendi Yani aşağıda bileşen. Yukarıdaki kodu "Öğrenci" bileşeni olmadan yayınlamak (gönderilmemiş olduğu gibi), iyi çalışıyor. Henüz çözmediyseniz, lütfen ayrıca kutu1.js.