0

Не пойму почему у меня ошибка

Uncaught Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

Как вообще от нее избавиться? Просто я внедрил redux-persist Вот мои весь код index.js

import React from 'react';
import ReactDOM from 'react-dom';
import  { Provider } from 'react-redux';
import { createStore, combineReducers, compose, applyMiddleware } from 'redux';
import { Route, Switch, Redirect } from 'react-router';
import { BrowserRouter } from 'react-router-dom';
import { PersistGate } from 'redux-persist/lib/integration/react';
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage';
import thunk from 'redux-thunk';
import Helmet from './aplication';
import loginReducers from './reducer/loginDucks';
import Auth from "./AuthForm";
import Home from "./Home";

const rootReducer = combineReducers({
    login: loginReducers,
});

const persistConfig = {
    key: 'root',
    storage: storage
};

const persistedReducer = persistReducer(persistConfig, rootReducer);

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(persistedReducer, composeEnhancers(
    applyMiddleware(thunk)
));

const persisrtor = persistStore(store);

ReactDOM.render(
        <div>
        <Helmet title='Авторизация'/>
        <Provider store={store}>
            <PersistGate loading={null} persistor={persisrtor}>
                <BrowserRouter>
                    <Switch>
                        <Route exact path='/' component={Auth}/>
                        <Route path='/index' component={Home}/>
                    </Switch>
                </BrowserRouter>
            </PersistGate>
        </Provider>
        </div>,
    document.getElementById('content')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

AuthForm.js

import React, { Component } from 'react';
import { Redirect } from 'react-router';
import { connect }from 'react-redux';
import TextField from 'material-ui/TextField';
import RaiseButtin from 'material-ui/RaisedButton';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import injectTapEventPlugin from 'react-tap-event-plugin';
import { login } from './reducer/loginDucks';

injectTapEventPlugin();

class UserForm extends Component{
    state = {
        form: {
            login: "",
            password: ""
        }
    };

    handleSubmit = e => {
        e.preventDefault();
        this.props.login(this.state.form);
    };

    handleChange = e => {
        const { name, value } = e.target;

        this.setState( prevState => ({
            form: {
                ...prevState.form,
                [name]: value,
            }
        }));
    };

    render(){
        const { form } = this.state;
        const { isLoading, isError, shouldRedirect, errorMessage } = this.props;
        if (shouldRedirect) return <Redirect to='/index'/>;
        return(
            <div className='authForm'>
                <h1>Авторизация</h1>
                <div className='error'>{isError && errorMessage}</div>
                <form onSubmit={this.handleSubmit}>
                    <MuiThemeProvider>
                        <TextField
                            hintText="Введите логин"
                            name="login"
                            fullWidth={true}
                            value={form.login}
                            required={true}
                            onChange={this.handleChange}
                        />
                    </MuiThemeProvider>
                    <MuiThemeProvider>
                        <TextField
                            hintText="Введите пароль"
                            type="password"
                            name="password"
                            fullWidth={true}
                            value={form.password}
                            required={true}
                            onChange={this.handleChange}
                        />
                    </MuiThemeProvider>
                    <MuiThemeProvider>
                        <RaiseButtin label="Войти" fullWidth={true} className="authForm-button"> <input type="submit" className="authForm-input" /> </RaiseButtin>
                    </MuiThemeProvider>
                </form>
            </div>
        );
    }
}

const mapStateToProps = state => ({
    isLoading: state.login.isLoading,
    isError: state.login.isError,
    shouldRedirect: state.login.shouldRedirect,
    errorMessage: state.login.errorMessage,
});

const mapDispatchToProps = {
    login,
};

export default connect(mapStateToProps, mapDispatchToProps)(UserForm)
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

И вытащу locginDucks.js

import axios from 'axios';

const LOGIN_REQUEST = 'LOGIN_REQUEST',
    LOGIN_SUCCESS = 'LOGIN_SUCCESS',
    LOGIN_ERROR = 'LOGIN_ERROR';

const loginSuccess = data => ({
    type: LOGIN_SUCCESS,
    payload: {id: data.id, login: data.login, name: data.name}
});

const loginError = data => ({
    type: LOGIN_ERROR,
    payload: data
});

export const login = form => async dispatch => {
    try {
        const res = await axios.post('/api/user', form);
        if (!res.data || res.data === false) {
            dispatch(loginError('Неправильный логин или пароль'));
        } else {
            dispatch(loginSuccess(res.data));
        }
    } catch (e) {
        dispatch(loginError(e.response.data));
    }
};

const initialState = {
    isLoading: false,
    isError: false,
    shouldRedirect: false,
    errorMessage: '',
    user: false,
};

export default (state = initialState, action) => {
    const { type, payload } = action;

    switch(type){
        case LOGIN_REQUEST:
            return {
                ...state,
                isLoading: true,
                isError: false
            };
        case LOGIN_SUCCESS:
            return {
                ...state,
                user: payload,
                isLoading: false,
                shouldRedirect: true,
                auth: true,
            };
        case LOGIN_ERROR:
            return {
                ...state,
                errorMessage: payload,
                isLoading: false,
                isError: true,
            };
        default:
            return state;
    }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

Это при авторизации

5
  • скопируйте пожалуйста полный текст ошибки, так как непонятно в каком компоненте она происходит. ну и код компонента. кажется это не в UserForm 25 янв 2018 в 15:09
  • at invariant (bundle.js:2516) at requestWork (bundle.js:28916) at scheduleWorkImpl (bundle.js:28815) at scheduleWork (bundle.js:28772) at Object.enqueueSetState (bundle.js:24295) at Route.Component.setState (bundle.js:16663) at Route.componentWillReceiveProps (bundle.js:5424) at callComponentWillReceiveProps (bundle.js:24472) at updateClassInstance (bundle.js:24658) at updateClassComponent (bundle.js:25931) 26 янв 2018 в 6:17
  • Это продолжение той ошибки, просто все не вмещается превышает символы 26 янв 2018 в 6:18
  • The above error occurred in the <Route> component: in Route in Switch in Router (created by BrowserRouter) in BrowserRouter in PersistGate in Provider in div Consider adding an error boundary to your tree to customize error handling behavior. Visit fb.me/react-error-boundaries to learn more about error boundaries. logCapturedError @ bundle.js:27830 26 янв 2018 в 6:18
  • Uncaught (in promise) TypeError: Cannot read property 'data' of undefined at _callee$ (localhost:3000/client/bundle.js:9998:70) at tryCatch (localhost:3000/client/bundle.js:15593:40) at Generator.invoke [as _invoke] (localhost:3000/client/bundle.js:15831:22) at Generator.prototype.(anonymous function) [as next] (localhost:3000/client/bundle.js:15645:21) at step (localhost:3000/client/bundle.js:9951:191) at localhost:3000/client/bundle.js:9951:361 at <anonymous> 26 янв 2018 в 6:18

1 ответ 1

1

Без сорцмапов конечно не очень удобно, но судя потому что некая переменная, должная содержать поле data не определена, а также так как всё происходит в генераторе, в который транспилируется async функция, проблема или тут

if (!res.data || res.data === false)

или тут (что скорее всего)

dispatch(loginError(e.response.data));

Соответственно нужно добавить проверку на существование res и e.response во втором случае, а также выяснить почему axios выбрасывает ошибку (нужно посмотреть на то, что из себя представляет e - там будет написан код и причиная ошибки.

Если не удаётся разобраться, сбрасывайте дамп ошибки..

введите сюда описание изображения

2
  • Комментарии не предназначены для расширенной дискуссии; разговор перемещён в чат.
    – Qwertiy
    27 янв 2018 в 11:28
  • @Qwertiy Зашел в чат 27 янв 2018 в 11:34

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.