当我在浏览器中看到它首先显示unavialbe几秒钟

Question

• 我是新来的反应js
• 我有几个if else条件
• 当未定义时，它应显示不可用
• 当它有值时，它应显示值。
• 现在，当我在浏览器中看到它首先显示unavialbe几秒钟，然后显示值。
• 你能告诉我如何解决它。
• 提供以下代码

import React from 'react';
import {connect} from 'react-redux';
import {sportsPrice} from '../../common/mixin-money-format';
import {sportsWeather} from '../../common/services';
import {showError} from '../../../redux/common/error/error-actions';
import {sportsMoneyLaunched} from '../../../util/build-link-urls';
import SportsKING from 'Sports-KING';

const SportsKING = new SportsKING();

const BALLContribution = React.createClass({
    // WILL BE REMOVED ONCE THE GOAL TRACKER SERVICE IS READY
    propTypes: {
        encId: React.PropTypes.string.isRequired,
        onEdit: React.PropTypes.func.isRequired,
        showGlobalError: React.PropTypes.func.isRequired
    },

    getInitialState() {
        return {
            sportsPerson: {'SportsChampionsYearToDateContributions': 0.0,
                         'SportsYearToDateContributions': 0.0},
            error: null
        };
    },

    componentDidMount() {
        if (this.props.encId) {
            sportsWeather(this.props.encId)
                .then(
                    (response) => {
                        const sportsPerson = response.data;
                        // todo should move this to the redux store
                        this.setState({sportsPerson});
                    }, (error) => {
                        this.setState({error});
                        this.props.showGlobalError();
                        SportsKING.error(error, 'Error retrieving BALL contribution details.');
                    }
                );
        }
    },

    componentWillReceiveProps(nextProps) {
        const {encId} = nextProps;
        if (encId && encId.length > 0 && encId !== this.props.encId) {
            sportsWeather(this.props.encId)
                .then((response) => {
                    const sportsPerson = response.data;
                    // todo should move this to the redux store
                    this.setState({sportsPerson});
                })
                .catch((error) => {
                    this.setState({error});
                    nextProps.showGlobalError();
                    SportsKING.error(error, 'Error retrieving BALL contribution details.');
                });
        }
    },

    editHandler() {
        this.props.onEdit();
    },

    render() {
        let tile;
        if (this.state.error) {
            tile = (
                <div className="content-box sports-light">
                    <div className="info-section">
                        <p className="negative text-center">Account Information Unavailable</p>
                    </div>
                </div>
            );
        } else if (this.state.sportsPerson.SportsYear === undefined && this.state.sportsPerson.SportsChampionsYear === undefined) {
            tile = (
                <div className="data-box sports-light">
                    <table className="sports-drinking">
                        <tbody>
                                <tr>
                                    <th scope="bottle">Current Year</th>
                                    <td className="errorRed">Unavailable</td>
                                </tr>
                                <tr>
                                    <th scope="bottle">Prior Year</th>
                                    <td className="errorRed">Unavailable</td>
                                </tr>
                            </tbody>
                    </table>
                    <ul className="link-list secondary-links">
                        <li><a href="javascript:;" onClick={sportsMoneyLaunched}>Make a Contribution</a></li>
                    </ul>
                </div>
            );
        } else if (this.state.sportsPerson.SportsYear === undefined) {
            tile = (
                <div className="data-box sports-light">
                    <table className="sports-drinking">
                        <tbody>
                                <tr>
                                    <th scope="bottle">Current Year ({ (this.state.sportsPerson.SportsChampionsYear) + 1 })</th>
                                    <td>{sportsPrice(parseFloat(this.state.sportsPerson.SportsYearToDateContributions))}</td>
                                </tr>
                                <tr>
                                    <th scope="bottle">Prior Year ({this.state.sportsPerson.SportsChampionsYear})</th>
                                    <td>{sportsPrice(parseFloat(this.state.sportsPerson.SportsChampionsYearToDateContributions))}</td>
                                </tr>
                            </tbody>
                    </table>
                    <ul className="link-list secondary-links">
                        <li><a href="javascript:;" onClick={sportsMoneyLaunched}>Make a Contribution</a></li>
                    </ul>
                </div>
            );
        } else if (this.state.sportsPerson.SportsChampionsYear === undefined) {
            tile = (
                <div className="data-box sports-light">
                    <table className="sports-drinking">
                        <tbody>
                                <tr>
                                    <th scope="bottle">Current Year ({(this.state.sportsPerson.SportsYear)})</th>
                                    <td>{sportsPrice(parseFloat(this.state.sportsPerson.SportsYearToDateContributions))}</td>
                                </tr>
                                <tr>
                                    <th scope="bottle">Prior Year ({ (this.state.sportsPerson.SportsYear) - 1 })</th>
                                    <td>{sportsPrice(parseFloat(this.state.sportsPerson.SportsChampionsYearToDateContributions))}</td>
                                </tr>
                            </tbody>
                    </table>
                    <ul className="link-list secondary-links">
                        <li><a href="javascript:;" onClick={sportsMoneyLaunched}>Make a Contribution</a></li>
                    </ul>
                </div>
            );
        } else {
            tile = (
                <div className="data-box sports-light">
                    <table className="sports-drinking">
                        <tbody>
                            <tr>
                                <th scope="bottle">Current Year ({this.state.sportsPerson.SportsYear})</th>
                                <td>{sportsPrice(parseFloat(this.state.sportsPerson.SportsYearToDateContributions))}</td>
                            </tr>
                            <tr>
                                <th scope="bottle">Prior Year ({this.state.sportsPerson.SportsChampionsYear})</th>
                                <td>{sportsPrice(parseFloat(this.state.sportsPerson.SportsChampionsYearToDateContributions))}</td>
                            </tr>
                        </tbody>
                    </table>
                    <ul className="link-list secondary-links">
                        <li><a href="javascript:;" onClick={sportsMoneyLaunched}>Make a Contribution</a></li>
                    </ul>
                </div>
            );
        }

        return (
            <section className="gray-box page-top">
                <h2>BALL Contributions</h2>
                <div className="flex-container flex-1">
                    <div className="flex-item half-item">
                        {tile}
                    </div>
                </div>
            </section>
        );
    }
});

const mapStateToProps = (state) => {
    return {};
};

const mapDispatchToProps = (dispatch) => {
    return {
        showGlobalError() {
            dispatch(showError());
        }
    };
};

export default connect(mapStateToProps, mapDispatchToProps)(BALLContribution);