javascript – Nachdem das Webpack den Code geteilt und geladen hat, wird die Reaktionsschnittstelle nicht aktualisiert

Question

Nachdem das Webpack den Code geteilt und geladen hat, wird die Reaktionsschnittstelle nicht aktualisiert.
Veröffentlichen Sie zuerst den 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>

        )
    }
}

Nachdem Sie auf „Laden“ geklickt haben, kann das Textsteuerelement geladen und angezeigt werden.

Wenn Sie jedoch auf „Ändern“ klicken, um den Status zu ändern, wird das Textsteuerelement nicht aktualisiert.
Das Druckprotokoll „this.state.text“ hat sich geändert.

Ich habe schon lange danach gesucht, aber ich weiß immer noch nicht, was das Problem ist. Bitte helfen Sie mir T.T.

Vielen Dank

Answer 1

问题出在 main.js 中 _loadText 的 textview: <Text text={this.state.text} /> 上

你的这种写法，实际上是告诉 React，当我 load 的时候，给我一个 Text 组件，并且属性是那时候的 this.state.text （这个例子里也就是 'text' ），父组件更新的时候并不会对 this.state.textview 进行更新

下面这么改就可以了

_loadText () 函数中，改变 this.setState 的内容

this.setState({
    textview: Text
})

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>