Nano Hash - криптовалюты, майнинг, программирование

Функция React JS Prop не определена для Proptypes

Я хочу вызвать функцию/действие при отправке формы, но когда триггер отправки React помещает

TypeError: this.props.login(...) is undefined

Это страница Login.js:

import React  from 'react';
import PropTypes from 'prop-types';
import Empty from '../Layouts/Empty';
import { Button }  from '../UI/Button';
import axios from 'axios'
import Notifications, {notify} from 'react-notify-toast';
import { connect } from 'react-redux'
import { login } from '../../actions/login'

class LoginForm extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
        email: '',
        password: '',
        isLoading: false
    };
    this.onChange = this.onChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  onChange(e) {
      this.setState({ [e.target.name]: e.target.value });
  }

  handleSubmit(event) {
    event.preventDefault();
    this.setState({ isLoading: true });
    this.props.login(this.state).then(function(response) {
    if (response.status == 404){
       return response.json().then(function(val) {
            let myColor = { background: '#f44242', text: "#FFFFFF" };
            notify.show(val.message, "custom", 5000, myColor);
       });
    }else if (response.status == 200){
       return response.json().then(function(val) {
            let myColor = { background: '#3AB54A', text: "#FFFFFF" };
            notify.show("Welcome!", "custom", 5000, myColor);
        })
    }else if (response.status == 422){
       return response.json().then(function(val) {
            let myColor = { background: '#f44242', text: "#FFFFFF" };
            notify.show("The email/password field is required", "custom", 5000, myColor);
        })
    }
    }).catch(function() {
        let myColor = { background: '#f44242', text: "#FFFFFF" };
        notify.show("Error en comunicacion" , "custom", 5000, myColor);
    });

  }

  render() {
    const {email, password, isLoading} = this.state;  
    return (
            <Empty>
                <div className='main'>
                    <Notifications />                    
                </div>
                <h1>Welcome Again</h1>
                <form onSubmit={this.handleSubmit}>
                    <div className="form-group">
                        <label>Email</label>
                        <input type="email" placeholder="[email protected]" name="email" value={email} className="form-control" onChange={this.onChange}/>
                    </div>
                    <div className="form-group">
                        <label>Password</label>
                        <input type="password" placeholder="***********" name="password" value={password}  className="form-control" onChange={this.onChange} />
                    </div>
                    <div className="form-group form-group-button">                    
                        <button type="submit" className="button button-primary button-right button" style={{width: "100%"}} disabled={isLoading}>LOGIN</button>
                    </div>
                </form>
                <div className="form-description">
                    <Button to='#' classes="button-block button-google">Login using Google+</Button>
                    <Button to='#' classes="button-block button-facebook">Login using Facebook</Button>
                </div>
            </Empty>
    );
  }
}
LoginForm.propTypes = {
    dispatch: PropTypes.func,
    login: PropTypes.func.isRequired
};

export default connect(null, { login })(LoginForm);

Действие над действиями папки:

export function login(data) {
    return dispatch => {
            fetch('MY_URL', {
            method: 'post',
            headers: {
                'Accept': 'application/json, text/plain, */*',
                'Content-Type': 'application/json'
            },
            body: data
        });
    }
}

И ошибка при отправке триггера:

TypeError: this.props.login(...) is undefined
handleSubmit
src/components/Pages/Login.js:30

  27 | handleSubmit(event) {
  28 |   event.preventDefault();
  29 |   this.setState({ isLoading: true });
> 30 |   this.props.login(this.state).then(function(response) {
  31 |   if (response.status == 404){
  32 |   return response.json().then(function(val) {
  33 |           let myColor = { background: '#f44242', text: "#FFFFFF" };

Что мне не хватает?

С Уважением.

31.10.2017

  • вы передаете простой объект connectи не передаете mapDispatchToProps 01.11.2017

Ответы:


1

Вы неправильно использовали connect со вторым аргументом: http://redux.js.org/docs/basics/UsageWithReact.html#implementing-container-components

Вы должны были сделать это так

const mapDispatchToProps = dispatch => {
  return {
    login: data => dispatch(login(data)),
  }
}


export default connect(null, mapDispatchToProps)(LoginForm);
31.10.2017
  • Как это? LoginForm.propTypes = { dispatch: PropTypes.func, login: PropTypes.func.isRequired }; const mapDispatchToProps = dispatch => { return { login: data => dispatch(login(data)), } } export default connect(null, mapDispatchToProps)(LoginForm); 01.11.2017
  • Не работает :( TypeError: this.props.login(...) is undefined handleSubmit src/components/Pages/Login.js:30 27 | handleSubmit(event) { 28 | event.preventDefault(); 29 | this.setState({ isLoading: true }); > 30 | this.props.login(this.state).then(function(response) { 31 | if (response.status == 404){ 32 | return response.json().then(function(val) { 33 | let myColor = { background: '#f44242', text: "#FFFFFF" }; 01.11.2017
  • Можете ли вы попробовать добавить console.log(this.props) в методы handleSubmit и render, чтобы увидеть значения и совпадают ли они? 01.11.2017
  • Это журнал: Консоль Консоль 01.11.2017
  • Это хорошо, this.props.login существует. Можете просто попробовать позвонить this.props.login(this.state) без then? (Это действительно отладка прямо сейчас, чтобы точно знать, где проблема, чтобы решить ее позже) 01.11.2017
  • О: это работает! Почему, когда я пытаюсь, выдается ошибка? Это обещание после всего, знаете ли вы? 01.11.2017
  • Я верю, потому что в вашей функции login в actions.js вы ничего не возвращаете :) Рад, что это вам помогло! 01.11.2017
  • Знаете ли вы способ поймать ответ и выполнить проверку компонента? 01.11.2017
  • Вы можете проверить один из моих ответ в другом вопросе, где я объясняю понятия isFetching и didInvalidate. Например, в коде вы можете увидеть некоторую обработку ошибок с помощью ADD_CONTACT_ERROR. В основном вы ловите ошибку в action и добавляете ошибку в свой редуктор и отображаете ее, если она есть в компоненте. 01.11.2017
  • Новые материалы

    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..

    Как написать эффективное резюме
    Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..

    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..

    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..

    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..

    Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
    В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..

    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..