Почему возвращает undefined is not an object (evaluating 'this.props.users')?

Question

[Nikita Shchypylov]

Пытаюсь получить с помощью редакса юзеров и пробежаться по ним :
Мой компонент :

import React, {Component} from 'react';
import {connect} from "react-redux";
import Slider from 'material-ui/Slider';
import {addBalance} from "../actions"
import cookie from "react-cookies"
import RaisedButton from 'material-ui/RaisedButton';


class Cash extends Component {
  state = {
    cash: 0,
    user: cookie.load("userID") || "guest"
  };
  
  handleChange = (e, value) => {
    this.setState({
      cash: value*100
    });
  };
  
  submitBalance() {
    let users = this.props.users; // РУГАЕТСЯ ОН НА ЭТУ СТРОЧКУ
    let login = this.state.user;
    let value = this.state.value;
    
    if (users !== undefined) {
      Object.keys(users).map(element => {
        if (login === users[element].login) {
          this.props.addBalance(element, value)
        }
      })
    }

  }
  
  render() {
    console.log('---', this.props.users); // ТУТ СНАЧАЛА ВЫВОДИТ ПУСТОЙ ОБЪЕКТ, НО ПО ВЫПОЛНЕНИЮ ЗАПРОСУ ВОЗВРАЩАЕТ ЗНАЧЕНИЕ
    return (
        <div>
          <h1>Here you may add some money</h1>
          <span>{this.state.cash}</span>
          <Slider onChange={this.handleChange}/>
          <RaisedButton label="Primary" primary={true} onClick={this.submitBalance}/>
        </div>
    );

}
}

const mapDispatchToProps = {
addBalance
};

export default connect(state => ({cash: state.cash, users: state.users, balance: state.balance}), mapDispatchToProps)(Cash);

Я даже добавил проверку вида if (users !== undefined), но при вызове функции submitBalance() консоль вбрасывает :
TypeError: undefined is not an object (evaluating 'this.props.users')

Почему так происходит?

Answer 1

[Антон Спирин]

Вы передаете функию колбеком в слушатель события onClick, она теряет контекст и this больше не ссылается на ваш компонент.
Исправить можно, изменив хандлер с class method на inline class function:

submitBalance = () => {
  // your stuff
};

либо можно забинтить функицю в конструкторе:

constructor(props) {
  super(props);
  this.submitBalance.bind(this);
}

Так же можно обернуть this.submitBalance в стрелочную функцию в render, но этот вариант лучше использовать когда надо передать свои аргументы:
onClick={e => this.submitBalance(someArg, e)}

Comments

[Nikita Shchypylov]

Когда же я это запомню? :) Благодарю

Answer 2

[Роман Александрович]

папробуйте так

submitBalance() {
if (this.props!==undefined && this.props.user!==undefined){
 let users = this.props.users; // РУГАЕТСЯ ОН НА ЭТУ СТРОЧКУ
}
    
    let login = this.state.user;
    let value = this.state.value;
    
    if (users !== undefined) {
      Object.keys(users).map(element => {
        if (login === users[element].login) {
          this.props.addBalance(element, value)
        }
      })
    }

  }


render() {
    console.log('---', this.props.users); // ТУТ СНАЧАЛА ВЫВОДИТ ПУСТОЙ ОБЪЕКТ, НО ПО ВЫПОЛНЕНИЮ ЗАПРОСУ ВОЗВРАЩАЕТ ЗНАЧЕНИЕ
    return (
        <div>
          <h1>Here you may add some money</h1>
          <span>{this.state.cash}</span>
          <Slider onChange={this.handleChange}/>
          <RaisedButton label="Primary" primary={true} onClick={()=>this.submitBalance()}/>
        </div>
    );

Comments

[Антон Спирин]

Проверки в начале функции бессмысленны.
Можно переписать так:

submitBalance = () => {
  const users = this.props.users || {};
  const { user, value } = this.state;
    
  Object.keys(users).map(user => {
    if (login === users[user].login) {
       this.props.addBalance(user, value);
    }
  });
};

[Роман Александрович]

Антон Спирин, запомню спасибо

[Антон Спирин]

Роман Александрович, лучше запомните, что по-хорошему надо задавать в редьюсерах начальное состояние для списков элеменов или коллекций и тогда проверки на существование или условия вроде his.props.users || {}; вообще не придется писать.

const initialState = {
  isLoading,
  isError,
  users: {},
};

или в случае с массивом:

const initialState = {
  isLoading,
  isError,
  usersList: [],
};

Так в любой функции компонента, в любой момент времени всегда будет существовать нужная сущность:

this.props.usersList.map(el => { ... }) // точно знаем, что массив есть всегда