javascript - webpack 分割載入程式碼後,react 介面不更新

Question

webpack 分割載入程式碼後,react 介面不更新.
先貼程式碼

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>

        )
    }
}

點選load後能載入text控制項並顯示
但點選change改變state時text控制項不會刷新，
列印日誌this.state.text已經改變了。

找了n久也不知道問題在哪，求大神T.T
拜謝

Answer 1

問題出在 main.js 中 _loadText 的 textview: 上

你的這種寫法，實際上是告訴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>