React 三元运算符首先显示“：”块。为什么？答案

【问题标题】：React ternary operator displays ":" block first. Why?React 三元运算符首先显示“：”块。为什么？
【发布时间】：2020-04-24 13:13:54
【问题描述】：

我有一个简单的反应应用程序，其中来自 firebase 的当前用户被传递到一个 Header 组件中。如果用户已登录，我想显示“登录”链接，如果没有，则显示“退出”链接。该代码有效，但是如果用户登录，它首先显示“SIGN-IN”，然后切换到“SIGN OUT”，而不仅仅是显示“SIGN OUT”。首次加载页面时，该开关非常明显。如果用户已登录，如何使其从不显示登录信息？

标题：

const Header = ({ currentUser }) => {
    return (
        <div className="top-nav">
            <ReactSVG src={crown}/>
            <div className="links">
                <Link to="/shop">SHOP</Link>
                <Link to="/contact">CONTACT</Link>
                {
                    currentUser ? <div onClick={() => auth.signOut()}>SIGN OUT</div>
                                : <Link to="/sign-in">SIGN-IN</Link>
                }
                <Link to="/cart">CART</Link>
            </div>
        </div>
    )
}
export default Header;

应用：

class App extends Component {
    constructor() {
        super();
        this.state = {
            currentUser: null
        }
    }

    componentDidMount() {
        auth.onAuthStateChanged(user => {
            this.setState({ currentUser: user});
            console.log(user);
        });
    }

    componentWillUnmount() {
        auth.signOut();
    }

    render() {
        return (
            <>
                <Header currentUser={this.state.currentUser}/>
                <Switch>
                    <Route exact path="/" component={HomePage}/>
                    <Route path="/sign-in" component={CredentialsPage}/>
                    <Route path="/shop" component={ShopPage}/>
                    <Route path="/shop/hats" component={Hats}/>
                    <Route path="/shop/jackets" component={Jackets}/>
                    <Route path="/shop/sneakers" component={Sneakers}/>
                    <Route path="/shop/womens" component={Womens}/>
                    <Route path="/shop/mens" component={Mens}/>
                </Switch>
            </>
        )
    }
}
export default App;

【问题讨论】：

标签： reactjs firebase-authentication

【解决方案1】：

onAuthStatedChanged 和 setState 都是异步的。您的初始状态是 currentUser: null。这是首先渲染的。只有这样，在异步调用解决后，状态才包括您的 currentUser。如果您想防止延迟，您应该跟踪获取状态并延迟该组件的呈现（可能带有指示器或不显示任何内容）

【讨论】：

【解决方案2】：

您应该保留一个标志来检查是否从服务器接收到数据。 isLoadComplete 变量表示是否从服务器加载数据。

{
       isLoadComplete && {  currentUser ? <div onClick={() => auth.signOut()}>SIGN 
       OUT</div>: <Link to="/sign-in">SIGN-IN</Link>}
}

【讨论】：