javascript - L'interface React n'est pas mise à jour une fois que Webpack a divisé et chargé le code

Question

Une fois que Webpack a divisé et chargé le code, l'interface de réaction ne se met pas à jour
Publiez d'abord le code

.

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>

        )
    }
}

Après avoir cliqué sur charger, le contrôle de texte peut être chargé et affiché.
Mais lorsque vous cliquez sur modifier pour modifier l'état, le contrôle de texte ne sera pas actualisé.
Le journal d'impression this.state.text a changé.

Je le cherche depuis longtemps mais je ne sais toujours pas quel est le problème S'il vous plaît, aidez-moi T.T
Merci

.

Answer 1

Le problème réside dans main.js _loadText 的 textview: <Text text={this.state.text} />

Votre façon d'écrire dit en fait à React que lorsque je charge, donnez-moi un Text 组件，并且属性是那时候的 this.state.text （这个例子里也就是 'text' ），父组件更新的时候并不会对 this.state.textview pour mettre à jour

Change-le comme ça

Dans la fonction

_loadText(), modifiez le contenu de this.setState

this.setState({
    textview: Text
})

fonction render()

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