Почему выдаёт Maximum update depth exceeded?

Question

[Nikita Shchypylov]

Всем привет.
Не понимаю, почему постоянно идёт триггер обновления в компоненте.
Код:

fetchBalanceUser() {
    let { users } = this.props; // это я получаю из редакса
    let login = this.state.user;
    Object.keys(users).map(element => {
      if (login === users[element].login) {
        this.props.fetchBalance(users[element].cash); // это я передаю в AC
      }
    });
  }

render() {
    this.fetchBalanceUser(); //вызываю
...

export const fetchBalance = val => {
  return {
    type: FETCH_BALANCE,
    payload: val
  };
};

import * as  actions from "../actions"

export function balanceReducer(state = 0, action) {
  switch (action.type) {
    case actions.FETCH_BALANCE:
      return action.payload;
    case actions.ADD_BALANCE:
      return state = state + action.payload;
    default:
      return state
  }
}

Все это вешает браузер и ругается :

Answer 1

[Анатолий Жаров]

не следует в методе render диспатчить действия: на действие происходит перерисовка, которая бросает действие, которое вызывает перерисовку, которая бросает действие

Comments

[Nikita Shchypylov]

Хорошо, а есть тогда идеи, как я могу значение из пропсов редакса передать в componentDidMount() ? Они сейчас у меня туда не передаются

[Анатолий Жаров]

Nikita Shchypylov, вроде как должны, можно на код взглянуть?

[Максим]

Nikita Shchypylov, они там должны быть сразу, так как ваш компонент приконекчен (через connect), единственное, не забывайте, что начальное состояние у вас может отличаться от того, что приходит из xhr-запроса (аякс-запроса). То есть для стандартной задачи: покажи компонент - запроси города с сервера - покажи города - у вас будет 2-3 отрисовки в зависимости от ваших данных.

Вы всегда можете воткнуть console.log / debugger и посмотреть, какие переменные у вас имеются в этой области видимости, чтобы на основе этого сделать какие-то выводы.

[Nikita Shchypylov]

Анатолий Жаров,

function mapStateToProps(state) {
  return {
    notifications: state.notifications,
    menu: state.menu,
    balance: state.balance,
    users: state.users  //Тут у меня коннект юзеров
  };
}

componentDidMount() {
    console.log(this.props.users); // выводит пустой array
    this.props.fetchNotifications();
    this.props.fetchBalance(this.state.user);
  }

render() {
    console.log(this.props.users); // тут сначала [], потом данные

[Анатолий Жаров]

Nikita Shchypylov, получение списка пользователей - ассинхронное действие. Проще всего - повесить лоадер на место компонента, пока их нет.