2015-03-30 12 views
7

Bir listedeki birden fazla akordeon işlemini yöneten bir Tepki bileşenim var, ancak çocukları güncelleştirdiğimde, React dev araçlarında, güncelleştirilen metni gösteriyordu, ancak görünümde/ui'de görünmüyordu güncelleştirme. Lütfen tavsiye. Tepki bileşen görünümü güncelleştirmeyi almıyor

enter image description here

var AccordionComponent = React.createClass({ 
    getInitialState: function() { 
    var self = this; 
    var accordions = this.props.children.map(function(accordion, i) { 
    return clone(accordion, { 
    onClick: self.handleClick, 
    key: i 
    }); 
}); 

    return { 
    accordions: accordions 
    } 
}, 
handleClick: function(i) { 
    var accordions = this.state.accordions; 

    accordions = accordions.map(function(accordion) { 
    if (!accordion.props.open && accordion.props.index === i) { 
     accordion.props.open = true; 
    } else { 
     accordion.props.open = false; 
    } 
    return accordion; 
    }); 

    this.setState({ 
    accordions: accordions 
    }); 
}, 
componentWillReceiveProps: function(nextProps) { 
    var accordions = this.state.accordions.map(function(accordion, i) { 
    var newProp = nextProps.children[i].props; 

    accordion.props = assign(accordion.props, { 
     title: newProp.title, 
     children: newProp.children 
    }); 

    return accordion; 
    }); 

    this.setState({ 
    accordions: accordions 
    }); 
}, 
render: function() { 
    return (
    <div> 
     {this.state.accordions} 
    </div> 
); 
} 

enter image description here

Düzenleme:
bileşen componentWillReceiveProps olayı tetikledi, ama hala güncellenmedi asla. Bu çözmeye çalışmakla gün sonra

cevap

3

Teşekkürler, ben bir çözüm ile çıktı var. Bileşenin sahne değiştiğinde componentWillReceiveProps olayı tetikleniyordu, bu yüzden sorun yoktu. Sorun, AccordionListComponent, AccordionComponent çocuklarının değerlerini/props/durumunu güncellememesiydi.

Güncel çözüm:

componentWillReceiveProps: function(nextProps) { 
var accordions = this.state.accordions.map(function(accordion, i) { 
    // get current accordion key, and props value 
    // update new props with old 
    var newAc = clone(accordion, nextProps.children[i].props); 

    // update current accordion with new props 
    return React.addons.update(accordion, { 
     $set: newAc 
    }); 
    }); 

this.setState({ 
    accordions: accordions 
}); 
} 

Ben sadece klon yapmak ve akordeon sıfırlamak için çalıştık, ama görünüşe göre bileşeni güncelleme vermedi.

Teşekkürler

1

Benzer bir sorunla karşılaştım. Bu yüzden çözümümü burada bildirmek uygun olabilir.


I (Ben ikinci tıklamadan sonra görsel değişimi görebiliyordu) Ben sadece yük veri düğmeye bir kez vurmak her zaman güncellenen elde değildi bir grafik vardı.

Grafik bileşeni, bir ana bileşenin (Redux deposuna bağlı) bir alt öğesi olarak tasarlanmıştır ve veriler bu nedenle destekleyici olarak geçiyordu.

Sorun: veriler mağazadan doğru şekilde getirildi (ebeveyn) ancak grafik bileşeni (çocuk) bunlara tepki vermiyor gibi görünüyor.

Çözüm:

componentWillReceiveProps(nextProps) { 
    this.props = null; 
    this.props = nextProps; 
    // call any method here 
    } 

Umut someway katkıda bulunabilir.

İlgili konular