React.js与setState

Question

每次重新加载页面时，都会看到使用{this.state.loggedIn? <Comp /> : null }隐藏了几毫秒的某些组件。这可能是一个大问题，因为setState的目标是响应并正确呈现视图。

我开始怀疑它与firebase api有关，这是我正在运行的功能，每次重载时，我都会看到我尝试使用提到的方法隐藏的登录表单

componentDidMount = () => {
    fire.auth().onAuthStateChanged(user => {
        if (user) {
            this.setState({ loading: false, loggedIn: true });
        } else {
            this.setState({ loading: false, loggedIn: false });
        }
    });
};

在构造函数中，我初始化loading:true，但我看不出有什么办法可以解决。请有人协助

Answer 1

首先检查应用程序是否已加载，然后检查用户是否已登录。

类似的东西：

render() {
  <React.Fragment>
  {!this.state.loading ? (this.state.loggedIn ? <Comp /> : null) : null}
  </React.Fragment> 
}

或事件清除器：

{!this.state.loading && this.state.loggedIn && <Comp />}

否则，这是您描述的情况的有效示例：

import firebase from "firebase/app";
import "firebase/auth";

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            loaded: false,
            auth: false
        };
    }

    componentWillMount = () => {
        const config = {
            //....
        };
        firebase.initializeApp(config);
        firebase.auth().onAuthStateChanged(user => {
            if (user) {
                this.setState({ auth: true, loaded: true });
            } else {
                this.setState({ auth: false, loaded: true });
            }
        });
    };
    render() {
        return (
            <React.Fragment>
                {this.state.loaded ? (
                    !this.state.auth ? (
                        <LoginSplash />
                    ) : (
                        <MiniDrawer />
                    )
                ) : (
                    <div style={styles.Loading}>
                        <CircularProgress />
                        {"  Loading..."}
                    </div>
                )}
            </React.Fragment>
        );
    }
}

export default App;

要检查的几件事：

1. 您导入：import "firebase/auth";和import firebase from "firebase/app";
2. 您的配置是从firebase复制的，您叫import firebase from "firebase/app";
3. 在检查身份验证之前检查加载的内容是否已更改