suchen

Heim  >  Fragen und Antworten  >  Hauptteil

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

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

黄舟黄舟2756 Tage vor745

Antworte allen(1)Ich werde antworten

  • 漂亮男人

    漂亮男人2017-06-26 10:55:01

    问题出在 main.js 中 _loadTexttextview: <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>

    Antwort
    0
  • StornierenAntwort