在 redux 连接的组件中多次调用 componentDidMount

问题描述

我有一个 reactjs+redux 应用，其中 app.js，首先要挂载的组件如下：

//all imports here
class App extends React.Component {
    
    constructor(){
        super();
        this.state = {
            loginState : false,}
    }

    componentDidMount() {
        firebase.auth().onAuthStateChanged((user) => {
            if (user) {
                console.log(user);
                if(user.displayName&&user.photoURL&&user.email)
                    this.props.dispatch(login(user.displayName,user.photoURL,user.email));
                else
                    this.props.dispatch(login(user.email.split("@")[0],"",""));
                this.setState({
                    loginState: true
                });
            }
            else{
                this.props.dispatch(changeLoading());
            }
        });
    }
    logout = () => {
        
        firebase
            .auth()
            .signOut()
            .then(() => {
                this.setState({
                    loginState : false,});
                this.props.dispatch(logout());
                this.props.history.push('/login');
            })
            .catch((err) => {
                console.log(err);
            });
    };
    render() {
        
        return (
            <>
                <Switch>
                    {this.props.userName?(<Route
                        exact
                        path="/"
                        component={() => <Homepage userName={this.props.userName} />}
                    />):(<Route exact path="/" component={Loading} />)}
                    <Route exact path="/login" component={Login} />
                    <Redirect to="/" />
                </Switch>
            </>
        );
    }
}

const mapStateToProps = (state) => {
    return {
        isLoggedIn: state.userState.isLoggedIn,userName: state.userState.userName,email: state.userState.email,photoURL: state.userState.photoURL
    };
};

export default withRouter(connect(mapStateToProps)(App));

下面是Homepage.js：

class Homepage extends React.Component{

    componentDidMount(){
        console.log("component mounted");
        this.props.dispatch(fetchPosts());
    }
    
    render(){
        console.log("Homepage reached");
        if(this.props.userName==='') return <Redirect to="/login" />
        return(
            <div className="container-fluid m-0" style={{paddingTop: '100px',paddingLeft: '0',paddingRight: '0'}}>
                <div className="row m-0">
                    <div class="col-md-1"></div>
                    <Main userName={this.props.userName} />
                    <Leftside userName={this.props.userName} />
                    <div class="col-md-1"></div>
                </div>
                
            </div>
        );
    }
}

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

export default connect(mapStateToProps)(Homepage); 

下面是减速器：

export const userState=(state={isLoading: true,isLoggedIn: false,userName: '',photoURL: ''},action)=>{
    switch(action.type){
        case 'LOGIN': {console.log("reached");return {...state,isLoading: false,isLoggedIn: true,userName: action.payload.userName,photoURL: action.payload.photoURL,email: action.payload.email}}
        case 'LOGOUT': return {...state,isLoggedIn:false,photoUrl: ''}
        case 'CHANGE': return {...state,isLoading: false}
        default: return {...state}
    }
}

基本上发生的事情是，最初当应用程序打开时，this.props.userName 是空的，因此 Loading 组件被加载。一旦 firebase 返回用户详细信息，它们就会被分派到 redux reducer。发生这种情况时，state.userState.userName 变得可用并挂载 Homepage。正如预期的那样，它的 componentDidMount 方法运行，帖子被提取并分派到 redux 存储（帖子存储在 redux 存储中）。但是突然 Homepage 卸载并再次安装，因此 componntDidMount 再次运行。因此，总共有两个 fetchPost 请求。

我不明白这种行为。我读过 componentDidMount 只运行一次。

请帮助我删除此错误。 谢谢！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）