reactjs在頁面加載ajax調用，console.log等從accross組件調用，即使這些組件不被執行

Question

我有2個主要組件，Home和Login。

Login：登錄用戶，並重定向到家裏組件

Home：沒有API調用獲取一些數據。我有一個console.log()。 console.log在Login和Home組件上都得到執行，即使它僅存在於Login組件上。我有getData()方法。 getData()方法在Login和Home組件上都得到執行，即使它僅存在於Home組件上。

我不知道如果這是做減肥補水。有沒有辦法阻止在不同的組件上執行特定組件的獨特操作？

店：

import { createStore, applyMiddleware, combineReducers } from 'redux'; 
import thunk from 'redux-thunk'; 
import logger from 'redux-logger'; 
import reducer from './reducer'; 
import homeReducer from './homeReducer'; 
import {autoRehydrate, persistStore} from 'redux-persist'; 
import localForage from 'localforage'; 

const store = createStore(
    combineReducers({ 
    reducer, 
    homeReducer 
    }), 
    {}, 
    applyMiddleware(thunk, logger), 
    autoRehydrate() 
); 

persistStore(store, {storage: localForage}) 
export default store; 

登錄組件：

import React, { Component } from 'react'; 
import { connect } from 'react-redux'; 
import { login, setLogingSuccess } from '../../actions/loginActions'; 
import {Header} from '../Shared/header'; 
import PropTypes from 'prop-types'; 
import cookies from 'universal-cookie'; 

class LoginForm extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
    //... 
    }; 
    } 
    componentDidMount(){ 
    console.log('login component'); 
    //... 
    } 
    componentWillReceiveProps(nextProps) { 
    //... 
    } 

    render() { 
    //... 

    return (
     <div className="col-md-6 col-md-offset-3" onSubmit={this.onSubmit}> 

     <h3>Login</h3> 
     <form name="LoginForm"> 
      <label htmlFor="email">Email:</label> 
      <input 
      className="form-control" 
      type="email" 
      name="email" 
      value={this.state.email} 
      onChange={e => this.setEmail(e)} 
      /> 
      <br /> 
      <label>Password:</label> 
      <input 
      className="form-control" 
      type="password" 
      name="password" 

      onChange={e => this.setPassword(e)} 
      /> 
      <br /> 
      //... 
     </form> 
     </div> 
    ); 
    } 
    }; 

//... 
} 
LoginForm.propTypes = { 
//... 
}; 

const mapStateToProps = state => { 
    return { 
    //... 
    }; 
}; 

const mapDispatchToProps = dispatch => { 
    return { 
    //... 
    }; 
}; 

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

首頁組件：

import React, { Component } from 'react'; 
import { connect } from 'react-redux'; 
import PropTypes from 'prop-types'; 
import axios from 'axios'; 

import Header from '../Shared/header'; 

import { 
    //... 
} from '../../actions/homeActions'; 

class Home extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     //... 
    }; 
    } 

    componentDidMount(){ 
    this.getData(); 
    } 

    componentWillReceiveProps(nextProps) { 
    //... 
    } 

    render() { 
    return (
     <div className="col-md-6 col-md-offset-3"> 
     <Header /> 
     <div> 
      <h3>Home</h3> 
     </div> 
     </div> 
    ); 
    } 

    getData = function(){ 
    axios.get('/_/data/') 
     .then(success =>{ 
     console.log(success); 
     }) 
     .catch(error =>{ 
     console.log(error) 
     }); 
    }; 
} 

Home.propTypes = { 
//... 
}; 

const mapStateToProps = state => { 
    return { 
//... 
    }; 
}; 

const mapDispatchToProps = dispatch => { 
    return { 
//.. 
    }; 
}; 

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

index.js：

import React from 'react'; 
import { render } from 'react-dom'; 
import { Provider } from 'react-redux'; 
import store from './redux/store'; 
import { BrowserRouter, Route, Switch } from 'react-router-dom'; 

import LoginForm from './components/LoginForm/LoginForm'; 
import Home from './components/HomePage/home'; 

class App extends React.Component { 
    render() { 
    return (
     <Provider store={store}> 
     <BrowserRouter> 
      <div> 
      <Route /> 
      <Switch> 
       <Route exact path={'/'} component={Home} /> 
       <Route path={'/login'} component={LoginForm} /> 
       <Route path="*" component={LoginForm} /> 
      </Switch> 
      </div> 
     </BrowserRouter> 
     </Provider> 
    ); 
    } 
} 
render(<App />, document.getElementById('root')); 

Answer 1

我已經發現了幾個問題，同時提高了解決這個問題：

1. 當我將重新水合物AUTH值，他們沒有正確復位 當用戶登出
2. 正確的方式來管理身份驗證是通過路由器，而不是通過組件。這可以防止不必要的API調用或狀態更改。
3. 我做了一些研究，發現以下指南：https://codepen.io/bradwestfall/project/editor/XWNWge?preview_height=50&open_file=src/app.js這是我用來調節AUTH問題

我添加了一個新的組件：

import React from 'react'; 
import { Route, Redirect } from 'react-router-dom'; 
import PropTypes from 'prop-types'; 
import cookies from 'universal-cookie'; 

class AuthorizedRoute extends React.Component { 
    componentWillMount() {} 

    getAuth() { 
    const cookie = new cookies(); 
    return cookie.get('auth'); 
    } 

    render() { 
    const { component: Component, ...rest } = this.props; 
    return (
     <Route 
     {...rest} 
     render={props => { 
      return this.getAuth() ? (
      <Component {...props} /> 
     ) : (
      <Redirect to="/login" /> 
     ); 
     }} 
     /> 
    ); 
    } 
} 

AuthorizedRoute.propTypes = { 
    render: PropTypes.any, 
    component: PropTypes.any 
}; 

export default AuthorizedRoute; 

更新的索引。JS路線switch語句：

import React from 'react'; 
import { render } from 'react-dom'; 
import { Provider } from 'react-redux'; 
import store from './redux/store'; 
import { BrowserRouter, Route, Switch } from 'react-router-dom'; 

import LoginForm from './components/LoginForm/LoginForm'; 
import Home from './components/HomePage/home'; 
import AuthorizedRoute from './.../AuthorizedRoute'; 

class App extends React.Component { 
    render() { 
    return (
     <Provider store={store}> 
     <BrowserRouter> 
      <div> 
      <Route /> 
      <Switch> 
       <AuthorizedRoute exact path={'/'} component={Home} /> 
       <Route 
       exact 
       path={'/login'} 
       render={props => <LoginForm {...props} />} 
       /> 
       <Route path="*" render={props => <LoginForm {...props} />} /> 
      </Switch> 
      </div> 
     </BrowserRouter> 
     </Provider> 
    ); 
    } 
} 
render(<App />, document.getElementById('root')); 

重新初始化權威性瓦爾在登錄組件：

componentDidMount() { 
    const cookie = new cookies(); 
    const auth = cookie.get('auth'); 
    if (auth) { 
     this.props.history.push('/'); 
    } else { 
     if (this.props.isLoginSuccess) { 
     this.props.setLogingSuccess(false); 
     this.props.setLoggedUser(null); 
     } 
    } 
    } 
    componentWillReceiveProps(nextProps) { 
    const { isLoginSuccess } = this.props; 
    if (!isLoginSuccess && nextProps.isLoginSuccess) { 
     this.props.history.push('/'); 
    } 
    } 

更新減速補充水分，以唯一的故事需要的信息：

case REHYDRATE: 
     var incoming = action.payload.reducer; 
     if (incoming) { 
     return { 
      ...state, 
      loggedUser: incoming.loggedUser, 
      isLoginSuccess: incoming.isLoginSuccess, 
     }; 
     } 
     break;