setState Tepki re-render

oy
0

Her şeyden önce, ben Tepki içine gerçekten yeni böylece konu hakkında benim bilgi eksikliği affet.

Bildiğim gibi yeni bir değer setstate zaman, tekrar görünümü vermektedir (ya ihtiyacı bazı bölümleri yeniden oluşturma).

Böyle bir şey var ve ben nasıl çözebileceklerini bu tür meselelere geliştirmek, vb bunun iyi bir uygulama olup olmadığını bilmek ister ya olmaz

class MyComponent extends Component {
    constructor(props) {
        super(props)
        this.state = { 
            key: value
        }
        this.functionRender = this.functionRender.bind(this)
        this.changeValue = this.changeValue.bind(this)
    }
    functionRender = () => {
        if(someParams !== null) {
            return <AnotherComponent param={this.state.key} />
        }
        else {
            return <span>Loading</span>
        }
    }
    changeValue = (newValue) => {
        this.setState({
            key: newValue
        })
    }
    render() {
        return (<div>... {this.functionRender()} ... <span onClick={() => this.changeValue(otherValue)}>Click me</span></div>)
    }
}

Başka bileşen

class AnotherComponent extends Component {
    constructor (props) {
        super(props)
    }
    render () {
        return (
            if (this.props.param === someOptions) {
                return <div>Options 1</div>
            } else {
                return <div>Options 2</div>
            }
        )
    }
}

Kodun niyeti ben yayılma tıkladıklarında devletin anahtarını değişecek ve ardından bileşen olmasıdır <AnotherComponent />nedeniyle parametrenin değişmelidir.

Ben setstate yaparken, Geri aramada yeni bir değere sahip bir konsol günlüğünü atmak ve doğru setted, ama emin AnotherComponentverilen param bağlı o bir şey ya da başka göstermesi nedeniyle, güncellemeler yapar değil.

Belki MyComponent bazı yaşam döngüsünü kullanmak gerekir?

Düzenle

Bunu buldum paramo AnotherComponenthep aynı biri, onu alıyor değil değişiklikleri.

Oluştur 08/11/2018 saat 11:18
kaynak kullanıcı
Diğer dillerde...                            


2 cevaplar

oy
1

Ben önce basit kullanılarak ebeveyn bunu test edeceğimiz öneririm console.logsenin üzerine changeValuefonksiyonu:

changeValue = (newValue) => {
    console.log('newValue before', newValue);
    this.setState({
        key: newValue
    }, ()=> console.log('newValue after', this.state.key))
}

setStateBir kabul edebilir geri arama durumu gerçekte değiştirilmedi sonra çağrılır (unutmayın setState zaman uyumsuz olan) .

Biz tüm bileşeni göremiyorum beri aslında orada neler olduğunu anlamak zor. Ben şüpheli newValueparametre hep aynıdır ama emin olamaz.
Kaçırdığınız gibi görünüyor propsiçinde AnotherComponent'nin yapıcı. olmalı:

 constructor (props) {
    super(props) // here
}

ile eğer ifadeyi değiştirerek deneyin:

{this.props.param === someOptions? <div>Options 1</div>: <div>Options 2</div>}

Ayrıca yeni sahne aslında bileşenine almak olmadığını görmek için bu işlevi ekleyin:

componentWillReceiveProps(newProps){
    console.log(newProps);
}

ve türü için kontrol paramve someOptionssen beri (haklı olarak) kullanılarak ===karşılaştırma.

Cevap 08/11/2018 saat 12:06
kaynak kullanıcı

oy
0

İlk olarak, yağ ok ( =>yapıcı metotta bağlamak gerekmez böylece bileşenin anahtarını değiştirirseniz) AutoBind yöntemleri, ikinci yeniden aktif kılar meydana gelir.

Ref: https://reactjs.org/docs/lists-and-keys.html#keys

Cevap 08/11/2018 saat 11:44
kaynak kullanıcı

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more