Nikulio
@Nikulio
NaN !== NaN

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

Пытаюсь получить с помощью редакса юзеров и пробежаться по ним :
Мой компонент :
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')

Почему так происходит?
  • Вопрос задан
  • 5319 просмотров
Решения вопроса 1
rockon404
@rockon404 Куратор тега React
Frontend Developer
Вы передаете функию колбеком в слушатель события 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)}
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
RomReed
@RomReed
JavaScript, Flutter, ReactNative, Redux, Firebase
папробуйте так
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>
    );
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы