Question

我是react js的新手，所以在这里我要在componentDidMout中调用一个动作，然后使其陷入无限循环，并一次又一次调用相同的动作。

路由->

render() {

      return (
        <div>
          <Router history={history}>
            <div>
              <Switch>
                 { this.props.isFetching && <Loading />  }
                <PrivateRoute exact path="/" component={LandingScreen} />
                <PrivateRoute exact path="/QuizSetupMain" component={QuizSetupMain} />
                <Route exact path="/login" component={LoginComponent} />
              </Switch>
            </div>
          </Router>
        </div>
      )
    }
  }
}

PrivateRoute->

const PrivateRoute = ({ component: Component, isFetching, hasUserLogIn, path, ...rest }) => {
  hasUserLogIn =  localStorage.getItem("access_token");
  console.log("hasUserLogIn", hasUserLogIn);
  if(hasUserLogIn !== undefined && hasUserLogIn !== null) {
      hasUserLogIn = true;
  }  else {
      hasUserLogIn = false;
  }
  console.log("hasUserLogIn",hasUserLogIn);
  return hasUserLogIn ?
    (
      <Route
        {...rest}
        path={path}
        component={Component}
      />
    )
    :
    (
      <Redirect
        to={{
          pathname: "/login",
          state: { from: path }
        }}
      />
    )
};

所以，这里我成功登录后，

history.push('/');
                    dispatch({
                        type: LOGIN_SUCCESS,
                        data: response.payload,
                    })  In the action of login.

现在，在“着陆”屏幕中，这意味着在该组件中/的路线之后，我正在调用action，它看起来像

componentDidMount() {
    this.props.fetchUserJd();
  }

因此，每次在操作中调用此方法时，/都会

export function fetchUserJd() {
  return (dispatch) => {
    let url = FETCH_JD_ROOT_URL + page + "&" + size;
    dispatch({
      type:REQUEST_INITIATED
    })
    get(url)
      .then((response) => {
        if (response.status === 200) {
          dispatch({
            type: REQUEST_SUCCESSED,
          });
          dispatch({
            type: FETCHING_JOBDESCRIPTION_SUCCESS,
            data: response.payload,
          }
          )
        }

我现在正在做

static getDerivedStateFromProps(nextProps, prevState) {
    if (nextProps.hasuserLogin || localStorage.getItem("access_token")) {
      nextProps.fetchUserJd();
    }
  }

因此，在这里，我什至向加载程序显示状态已更改，但它仍然一次又一次地调用api请求。我不明白为什么这会再次调用相同的请求。有人可以建议我吗？

在ComponentDidMount中调用的动作被无限调用

0 个答案: