Question

我有一个小问题，但这让我感到困惑。在我的React组件的渲染函数中，我正在显示bootstrap微调器。它仅显示isSaving是否为TRUE。

class Scorer extends Component {

    constructor(props, context) {
        super(props, context);

        this.store     =     this.context.store;
        this.state     = {
            matchId:    props.match.params.id,
            isLoading:  true,
            isSaving:   false,
            saveStatus: "",
        };

        this.toggleSavingStatus   = this.toggleSavingStatus.bind(this);
        this.toggleLoadingStatus  = this.toggleLoadingStatus.bind(this);
    }

    componentDidMount() {
        // Get initial state from server
        console.log('Get Initial State from Server', this.state.isLoading);
        utilGetJSON('startup.php?matchId=' + this.state.matchId)
            .then((response) => {
                this.toggleLoadingStatus();

                this.store.dispatch({
                    type:       constants.INITIAL_STATE,
                    payload:    response.data
                });
            })
            .catch((error) => {
                console.log('axios.get ERROR', error);
                this.toggleLoadingStatus();
            });
    }


    toggleLoadingStatus() {
        this.setState = ({
            isLoading: !this.state.isLoading,
        }, ()=>{
            console.log('Flag toggle Loading: ', this.state.isLoading);
        });
    }
    toggleSavingStatus() {

        this.setState = ({
            isSaving: !this.state.isSaving,
        }, ()=>{
            console.log('Flag toggle Saving:', this.state.isSaving);
        });
    }

    componentWillReceiveProps(nextProps, nextState){
        saveStateToServer(nextState.store.getState(), this.toggleSavingStatus);
        const stateSavedObj = getStateSavedObj(nextState.store.getState());

        if ( stateSavedObj !== null ){
            const lastSavedDate = new Date(stateSavedObj.timestamp * 1000);
            this.setState({
                saveStatus: "Match last saved on server at "+lastSavedDate.toLocaleString()
            });
        }
    }

    render() {
        return (
            <div>
                { this.state.isLoading &&
                    <div className="text-center text-danger">
                        <i className="fa fa-spinner fa-spin font-md" aria-hidden="true"></i><br/>Loading</div>
                }
                { this.state.isSaving &&
                <div className="text-center text-danger">
                    <i className="fa fa-spinner fa-spin font-md" aria-hidden="true"></i><br/>Saving on server</div>
                }
                { this.state.saveStatus !== '' && !this.state.isSaving &&
                <div className="container">
                    <div className="bs-callout bs-callout-danger text-danger">
                        {this.state.saveStatus}
                    </div>
                </div>
                }
            </div>
        );
    }
}

Scorer.contextTypes = {
    store: PropTypes.object
};

我为了简单而减少了这个课程。现在我调用其他函数将标志设置为FALSE。 Console.log确认了它，但仍然显示微调器。

Get Initial State from Server true
Scorer.js:53 toggleLoadingStatus() called
Scorer.js:57 Flag toggle Loading:  true

我不明白。在角度（我一直在工作）。我可以通过将变量设置为false来轻松隐藏微调器。

请帮忙。

由于

Answer 1

在React中，您应该使用组件状态，您的代码应该如下所示：

class Scorer extends Component {

    constructor(props, context) {
        super(props, context);
        this.state = {
            isSaving: false
        }
        this.toggleSavingStatus  = this.toggleSavingStatus.bind(this);
    }

    toggleSavingStatus() {
        this.setState({
            isSaving : !this.state.isSaving
        },()=>{
           console.log('Flag toggle', this.state.isSaving);
        });
    }

    render() {
        return (
            <div>
                <ScoreAction />
                { this.state.isSaving &&
                <div className="text-center text-danger">
                    <i className="fa fa-spinner fa-spin font-md" aria-hidden="true"></i><br/>Saving on server</div>
                }
            </div>
        );
    }
}

最后编辑它最好使用setState的回调函数来检查新的更新状态值，因为在某些情况下，您可能会记录旧状态，因为setState函数是异步的。

Answer 2

问题是isSaving是一个类变量，即使你改变它的值，它也不会触发rerender。我建议您将此值保持在状态，并setState。

class Scorer extends Component {

    constructor(props, context) {
        super(props, context);

        this.state = {isSaving:false}
        this.toggleSavingStatus  = this.toggleSavingStatus.bind(this);
    }

    toggleSavingStatus() {
        this.setState((prevState) => ({isSaving: !prevState.isSaving}))
    }

    render() {
        return (
            <div>
                <ScoreAction />
                { this.isSaving &&
                <div className="text-center text-danger">
                    <i className="fa fa-spinner fa-spin font-md" aria-hidden="true"></i><br/>Saving on server</div>
                }
            </div>
        );
    }
}

在您想要从渲染中更改其值之前，保持值处于状态是没有问题的，因为它会进入循环。在这种情况下，您可以将其保存在变量中，并在实际需要时执行forceUpdate而不是每次更改。

变量已更改但旋转器仍显示

2 个答案: