為什么要卸下我的組件？

Question

我在控制台中收到以下警告。

警告：只能更新已安裝或正在安裝的組件。 這通常意味着您在未安裝的組件上調用了setState，replaceState或forceUpdate。 這是無人值守。

請檢查ProgressBar組件的代碼。

在我看來，這是因為中componentWillUnmount后首先出現這種情況componentDidMount （見底部控制台輸出）。 componentWillUnmount發生在從服務器到達數據之前。 當數據最終到達時， setState嘗試使用卸載的東西。

但是為什么在那里有一個componentWillUnmount呢？ 我希望只有在調用setState （並且數據已從服務器到達）之后才會發生卸載。 因此，該組件仍然可以使用setState進行操作。

class ProgressBar extends React.Component {
    constructor(props) {
        super(props);
        this.state = { progress: 0 };
    }

    loadProgressFromServer() {
        let url = '/progress/' + this.props.topic_name;
        console.log("LOADING progress FROM SERVER");
        $.ajax({
            url: url,
            datatype: 'json',
            cache: false,
            success: function(data) {
                console.log("finished loading from server");
                this.setState({ progress: data['progress'] });
            }.bind(this)           
        })
    }

    componentDidMount() {
        console.log("didmount");
        this.loadProgressFromServer();
    }

    componentWillUnmount() {
        console.log("willunmount");
    }

    render() {
        let progress = (this.state.progress * 100).toFixed(0);
        return (
            <div className="progress" ref="pb">
                <div className="progress-bar" role="progressbar" aria-valuenow={ progress } aria-valuemin="0" aria-valuemax="100" style={{ width: progress +"%" }}>
                    { progress + "%" }
                </div>
            </div>
        )
    }
}

控制台輸出：

didmount
LOADING progress FROM SERVER
willunmount
didmount
LOADING progress FROM SERVER
finished loading from server
Warning: Can only update a mounted or mounting component. This usually means you called setState, replaceState, or forceUpdate on an unmounted component. This is a no-op.

Please check the code for the ProgressBar component.
finished loading from server

編輯：沒有更高階的組件。

ReactDOM.render(
    <ProgressBar topic_name='name of topic' />,
    document.getElementById('progressbar')
);

Answer 1

看看是否有幫助（請注意async: false ） this.setState({ progress: data['progress'] });的默認值是true，在呈現組件后，它將從服務器返回數據-設置this.setState({ progress: data['progress'] }); 導致您收到警告消息

loadProgressFromServer() {
        let url = '/progress/' + this.props.topic_name;
        console.log("LOADING progress FROM SERVER");
        $.ajax({
            url: url,
            async: false
            datatype: 'json',
            cache: false,
            success: function(data) {
                console.log("finished loading from server");
                this.setState({ progress: data['progress'] });
            }.bind(this)           
        })
    }