Невозможно прочитать свойство успешно неопределено, используя Reactjs Toastr

Question

Я работаю с реагировать на тостр по этой ссылке https://www.npmjs.com/package/react-toastr для моей формы реакт-редукса. я установил как npm install --save react-toastr и сделал импорт согласно требованиям

import { ToastContainer } from "react-toastr";
import { ToastMessage } from "react-toastr";
import { ToastMessageAnimated } from "react-toastr";
let container;

в src / index.html у меня есть toastr.min.css и toastr.animate.css файлы

В компоненте RegisterPage, когда я нажимаю кнопку Test Toastr в соответствии с приведенным ниже кодом, все работает нормально

 <div className="container">
  <ToastContainer
    ref={ref => container = ref}
    className="toast-top-right"
  />
  <h1>
    React-Toastr
    <small>React.js toastr component</small>
  </h1>
  <div className="btn-container">
    <button
      className="primary"
      onClick={() =>
        container.success(`hi! Now is `, `success`, {
          closeButton: true,})
      }
    >
     Test Toastr
    </button>

  </div>

</div>

Вот что я пытаюсь сделать. Я хочу отобразить оповещение о сообщении toastr, если регистрация прошла успешно, но показывает ошибку

bundle.js: 36689 Uncaught TypeError: Невозможно прочитать свойство 'success' из неопределенного , когда я добавил этот код ниже в user.service.js files

setTimeout(()=>{ this.container.success(`hi! jmarkatti `, `success`, {closeButton: true,}); }, 400);

Вот user.service.js files

import config from 'config';
import { authHeader } from '../_helpers';

import { ToastContainer } from "react-toastr";
import { ToastMessage } from "react-toastr";
import { ToastMessageAnimated } from "react-toastr";
let container;

export const userService = {

    register,
    update,
};


function register(user) {
    const requestOptions = {
        method: 'POST',

return fetch(`../register.php`, requestOptions).then(handleResponse)
        .then(res => {

            if (res) {

//setTimeout(()=>{ this.container.success('Data added successfully'); }, 400);
setTimeout(()=>{ this.container.success(`hi! jmarkatti `, `success`, {closeButton: true,}); }, 400);
console.log('Data added suucessfully');
            }

            return user;
        });


}

Код ниже представляет собой RegisterPage Component.

import React from 'react';
import { Link } from 'react-router-dom';
import { connect } from 'react-redux';

import { userActions } from '../_actions';

import { ToastContainer } from "react-toastr";
import { ToastMessage } from "react-toastr";
import { ToastMessageAnimated } from "react-toastr";
let container;

class RegisterPage extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            user: {
                firstName: '',
                lastName: '',
                username: '',
                password: ''
            },
            submitted: false
        };

        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleChange(event) {
        const { name, value } = event.target;
        const { user } = this.state;
        this.setState({
            user: {
                ...user,
                [name]: value
            }
        });
    }

    handleSubmit(event) {
        event.preventDefault();

        this.setState({ submitted: true });
        const { user } = this.state;
        const { dispatch } = this.props;
        if (user.firstName && user.lastName && user.username && user.password) {
            dispatch(userActions.register(user));
        }
    }

    render() {
        const { registering  } = this.props;
        const { user, submitted } = this.state;
        return (
            <div className="col-md-6 col-md-offset-3">

                <h2>Test Toastr</h2>

 <div className="container">
  <ToastContainer
    ref={ref => container = ref}
    className="toast-top-right"
  />
  <h1>
    React-Toastr
    <small>React.js toastr component</small>
  </h1>
  <div className="btn-container">
    <button
      className="primary"
      onClick={() =>
        container.success(`hi! Jmarkatti `, `success`, {
          closeButton: true,})
      }
    >
     Test Toastr
    </button>

  </div>

</div>

                <form name="form" onSubmit={this.handleSubmit}>

// form input removed to reduce code

                    <div className="form-group">
                        <button className="btn btn-primary">Register</button>
                        {registering && 
                                         }

                    </div>
                </form>
            </div>
        );
    }
}

function mapStateToProps(state) {
    const { registering } = state.registration;
    return {
        registering
    };
}

const connectedRegisterPage = connect(mapStateToProps)(RegisterPage);
export { connectedRegisterPage as RegisterPage };

Обновления здесь

user.action.js код

function register(user) {
    return dispatch => {
        dispatch(request(user));

        userService.register(user)
            .then(
                user => { 

/*
                   dispatch(success());
                    history.push('/login');
                    dispatch(alertActions.success('Registration successful'));
*/

                },
                error => {
                    dispatch(failure(error.toString()));
                    dispatch(alertActions.error(error.toString()));
                }
            );
    };

user.reducer.js коды

import { userConstants } from '../_constants';

export function registration(state = {}, action) {
  switch (action.type) {
    case userConstants.REGISTER_REQUEST:
      return { registering: true };
    case userConstants.REGISTER_SUCCESS:
      return {};
    case userConstants.REGISTER_FAILURE:
      return {};
    default:
      return state
  }
}

Answer 1

Попробуйте с этим

Изменение

   setTimeout(()=>{ this.container.success(`hi! jmarkatti `, `success`, {closeButton: true,}); }, 400);

К

    setTimeout(()=>{ 
            if(this.container){
                     this.container.success(`hi! jmarkatti `, `success`, {closeButton: true,}); 
             }
     }, 400);