javascript - Selepas webpack membelah dan memuatkan kod, antara muka tindak balas tidak dikemas kini

Question

Selepas pek web membelah dan memuatkan kod, antara muka reaksi tidak dikemas kini
Siarkan kod dahulu

main.js

export default class extends React.Component {

    constructor(props) {
        super(props)
        this.state = {
            textview: undefined,
            text: 'text'
        }
    }
    _loadText() {
        if (!this.state.textview)
            require.ensure([], require => {
                const Text = require('./text').default;
                this.setState({
                    textview: <Text text={this.state.text} />
                })
            })
    }
    render() {
        return (
            <p>
                <p>Main</p>
                <button onClick={() => this._loadText()}>load</button>
                <button onClick={() => this.setState({ text: 'change' })}>change</button>
                {this.state.textview}
            </p>
        )
    }
}

text.js

export default class extends React.Component {
    render() {
        return (
            <p>{this.props.text}</p>

        )
    }
}

Selepas mengklik muat, kawalan teks boleh dimuatkan dan dipaparkan
Tetapi apabila mengklik tukar untuk menukar keadaan, kawalan teks tidak akan dimuatkan semula
Log cetak this.state.text telah berubah.

Saya dah lama cari tapi masih tak tahu apa masalahnya T.T
Terima kasih

Answer 1

Masalahnya terletak pada main.js _loadText 的 textview: <Text text={this.state.text} />

Cara penulisan anda sebenarnya memberitahu React bahawa apabila saya memuatkan, beri saya Text 组件，并且属性是那时候的 this.state.text （这个例子里也就是 'text' ），父组件更新的时候并不会对 this.state.textview untuk mengemas kini

Cuma tukar macam ni

Dalam fungsi

_loadText (), tukar kandungan this.setState

this.setState({
    textview: Text
})

fungsikan ()

<p>
    <p>Main</p>
    <button onClick={() => this._loadText()}>load</button>
    <button onClick={() => this.setState({ text: 'change' })}>change</button>
    {this.state.textview ? React.createElement(this.state.textview, { text: this.state.text }) : null}
</p>