Question

不确定如何继续前进。我有一个（相当）简单的设置react-router，几乎一切都按预期工作 - 我得到应用程序和我的api之间的请求和响应 - 除了我有一个函数，我期望从我的应用程序componentDidMount运行生命周期功能，但不知何故没有被击中...

这是我的代码的最小版本：

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Switch } from 'react-router';
import { connect } from 'react-redux';
import { authenticate, unauthenticate } from './actions/session';
import RouteAuthenticated from './RouteAuthenticated'; // Route if authenticated
import RedirectAuthenticated from './RedirectAuthenticated'; // Redirect to login if not authenticated
import Home from './Home';
import Login from './Login';
import Signup from './Signup';

class App extends Component {
  componentDidMount() {
    const token = localStorage.getItem('token'); // eslint-disable-line no-undef
    console.info(token);    // <====   Shows a token, great!
    console.info(this.props.authenticate.toString()); // Output below
    if (token) {
      console.info(`We have a token`); // <=== I get to here
      this.props.authenticate(); // <=== Never gets run...????
    } else {
      this.props.unauthenticate();
    }
  }
  render() {
    const { isAuthenticated, willAuthenticate } = this.props;
    const authProps = { isAuthenticated, willAuthenticate };
    return (
      <div className="App">
        <Header />
        <Switch>
          <RouteAuthenticated exact path="/" component={Home} {...authProps} />
          <RedirectAuthenticated exact path="/login" component={Login} {...authProps} />
          <RedirectAuthenticated exact path="/signup" component={Signup} {...authProps} />
        </Switch>
      </div>
    );
  }
}

App.propTypes = {
  authenticate: PropTypes.func.isRequired,
  unauthenticate: PropTypes.func.isRequired,
  isAuthenticated: PropTypes.bool.isRequired,
  willAuthenticate: PropTypes.bool.isRequired
};

const mapStateToProps = (state) => ({
  isAuthenticated: state.isAuthenticated,
  willAuthenticate: state.willAuthenticate
});

const mapDispatchToProps = () => ({
  authenticate,
  unauthenticate
});

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

由于这看起来非常奇怪，我决定继续前进，确保实际上是一个运行的函数。我放在上面的console.info(this.props.authenticate.toString());行，这是我得到的，看起来很好，除了它从未实际运行：

function authenticate() {
  return function (dispatch) {
    console.info("auth function");
    dispatch({
      type: 'AUTHENTICATION_REQUEST'
    });
    try {
      console.info("AUTHing");
      setCurrentUser(dispatch, _api2.default.get('is-auth'));
    } catch (e) {
      console.info("AUTH ERROR");
      localStorage.removeItem('token'); // eslint-disable-line no-undef
      window.location = '/login'; // eslint-disable-line no-undef
    }
  };
}

这是原始功能：

export const authenticate = () => (dispatch) => {
  console.info("auth function"); // <=== never called?
  dispatch({
    type: 'AUTHENTICATION_REQUEST'
  });
  try {
    console.info("AUTHing");
    setCurrentUser(dispatch, api.get('is-auth'));
  } catch (e) {
    console.info("AUTH ERROR");
    localStorage.removeItem('token');
    window.location = '/login';
  }
};

商店：

import { createStore, applyMiddleware } from 'redux';
import { routerMiddleware } from 'react-router-redux';
import thunk from 'redux-thunk';
import history from './history';
import reducers from './reducers';

const middleWare = [thunk, routerMiddleware(history)];
const createStoreWithMiddleware = applyMiddleware(...middleWare)(createStore);

const store = createStoreWithMiddleware(reducers);

export default store;

我可以从这里尝试任何想法吗？

未在ComponentDidMount中调用函数

0 个答案: