Question

我正在与react.js合作开发一个项目，以学习redux。它基本上是一个登录名和一个主页。我使用react-router-dom在组件之间进行重定向，使用redux管理状态并了解用户是否已登录，还使用redux-thunk来使请求异步。

当用户输入其凭据并按下登录按钮时，将向API发出请求。如果API响应为true，则使用redux将authUser从false更改为true，然后通过history.push()将其重定向到路径/中的组件。

按下登录按钮后，如果凭据正确，则应重定向到路径/，该路径以Layout作为要呈现的组件。

这是主要组件的代码：

import React, { Component } from 'react';
import { Redirect, Route, Switch } from "react-router-dom";
import { connect } from "react-redux";

import Login from "../../views/Login/Login.js";
import Layout from "../Layout/Layout";

const RestrictedRoute = ({component: Component, authUser, ...rest}) => {
  return (
    <Route
      {...rest}
      render={props =>
        authUser
          ? <Component {...props} />
          : <Redirect
            to={‌{
              pathname: '/login',
              state: {from: props.location}
            }}
        />}
    />
  );
}

class Main extends Component {
  render () {
    const { authUser, match, history } = this.props;
    if (authUser) {
      history.push("/");
    }
    return (
      <Switch>
        <Route exact path='/login' component={Login}/>
        <RestrictedRoute path={`${match.url}`} authUser={authUser}                         component={Layout}/>
      </Switch>
    );
  }
}

const mapStateToProps = state => {
  return {
    authUser: state.authUser,
  };
}
export default connect(mapStateToProps)(Main);

这是Layout组件：

import React, { Component } from "react";
import PropTypes from "prop-types";

import "perfect-scrollbar/css/perfect-scrollbar.css";

import withStyles from "@material-ui/core/styles/withStyles";

import Footer from "../../components/UI/Footer/Footer";

import dashboardStyle from "../../assets/jss/material-dashboard-react/layouts/dashboardStyle";

class Layout extends Component {

  render() {
    const { classes, match } = this.props;
    console.log(match);
    return (
      <div className={classes.wrapper}>
        <div className={classes.mainPanel} ref="mainPanel">
          <div className={classes.content}>
            <div className={classes.container}>
              Layout
            </div>
          </div>
          <Footer />
        </div>
      </div>
    );
  }
}

Layout.propTypes = {
  classes: PropTypes.object.isRequired
};

export default withStyles(dashboardStyle)(Layout);

这是通过redux设置状态的方式：

export const goLogin = async (data) => {
  const login = await instance.post(`/route`, data);
  if (login.status) {
    return {
      type: types.LOG_IN,
      authUser: true
    }
  }
}

 export const onLogIn = (data) => {
  return async (dispatch) => {
    dispatch(await goLogin(data))
  }
}

但是然后，我得到了这个错误：

“超出了最大更新深度。当组件重复调用componentWillUpdate或componentDidUpdate内部的setState时，可能会发生这种情况。React限制嵌套更新的数量以防止无限循环。”

我去服务器并在redux中设置状态是否有问题？

在控制台中，它看起来像进入了一个循环：

Loop in console

Console error

Answer 1

如果fig, axs = plt.subplots(ncols=len(df.columns), figsize=(8,4)) df.plot(subplots=True, ax=axs) plt.show()为true，则authUser将导致重新渲染和无限循环。将此answer选中类似的问题。

如果我不使用它们，为什么在反应生命周期方法中会出现错误？

1 个答案: