Использовать Бдительность в React.js

Хорошие я хотел бы использовать следующий книжный магазин https://www.npmjs.com/package/react-alert | чтобы показывать бдительность в React.js, послав формуляр проблема состоит в том, что оно только функционирует, когда я помещаю действие в "onClick", но хочу использовать ее, когда я делаю return функции fetch.

Спасибо, я жду ответы.


Как использование alert.show () без onclick как будто это была простая линия кода.

В index.js эта конфигурация давайте говорить извещения

//index.js
import React from 'react';
import ReactDOM from 'react-dom';
import 'bootstrap/dist/css/bootstrap.min.css';
import { transitions, positions, Provider as AlertProvider } from 'react-alert'
import AlertTemplate from 'react-alert-template-basic'
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

const options = {
    // you can also just use 'bottom center'
    position: positions.BOTTOM_CENTER,
    timeout: 5000,
    offset: '30px',
    // you can also just use 'scale'
    transition: transitions.SCALE
}

const Root = () => (
    
        
    
)


ReactDOM.render(, document.getElementById('root'));

В Notificacion.js это пример, когда ты выходишь ему на кнопку, у тебя выходит бдительность это функционирует правильно, когда я импортирую ее для Register.js

//Notification.js
import React from 'react'
import { useAlert } from 'react-alert'

const Notificacion = () => {
  const alert = useAlert()

  return (
    
  )
}

export default Notificacion;

И в Register.js он, где у меня есть проблема, я хочу использовать alert.show (), но меня отпускает ошибка.

//Register.js
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import Notificacion  from '../notificacions/notification';

class Login extends Component {
    constructor() {
        super();
        this.state = {
            nickName: '',
            password: '',
            confPassword: ''
        }

    }

    changeState = (event) => {
        this.setState({ [event.target.name]: event.target.value });
    };

    submitRegistration = async (event) => {

        event.preventDefault();

        await fetch('/register', {
            method: 'post',
            body: JSON.stringify({
                nickname: this.state.nickName,
                password: this.state.password
            }),
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            }
        }).then(async (response) => {
            if (response.ok) {
                await response.json();
                return alert.show() //salta error

            } else {
                return //aqui quiero usar alert.show('alerta'); pero me salta error  
            }
        });
    };

Я импортировал useAlert, чтобы использовать alert и потом помещаю ее в постоянную величину, но отпусти ошибку

import { useAlert } from 'react-alert';
    submitRegistration = async (event) => {

        event.preventDefault();
        const alert = useAlert();
        await fetch('/register', {
            method: 'post',
            body: JSON.stringify({
                nickname: this.state.nickName,
                password: this.state.password
            }),
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            }
        }).then(async (response) => {

            if (response.ok) {
                await response.json();
                return alert.show('Correcto');

            } else {
                return alert.show('Error');
            }
        });
    };

ОШИБКА: Unhandled Rejection (Инвариант Виолатион): Invalid hook call. Hooks хан only be called inside of the body of в function component. This could happen for one of the following reasons: 1. You might have mismatching versions of React and the renderer (such эксперт Реакт DOM) 2. You might be breaking the Задницы of Hooks 3. You might have обитал than one copy of React in the same app

2
задан 29.07.2019, 22:33
1 ответ

Depronto не кажется ясным, но ты ломаешь одно из правил hooks, не называй Hooks с функций язык сценариев JavaScript ты отрегулируешь . Вместо этого, ты можешь называть Hooks с функциональных компонентов React. Выражение не называй это useAlert () я углубляюсь твоей функции onSubmit, назови это снаружи и убедись, что ты был в функциональном компоненте, чем-то как это:

import { useAlert } from 'react-alert';
function FunctionalComponent(props){
    const alert = useAlert();

    submitRegistration = async (event) => {

        event.preventDefault();
        await fetch('/register', {
            method: 'post',
            body: JSON.stringify({
                nickname: this.state.nickName,
                password: this.state.password
            }),
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            }
        }).then(async (response) => {

            if (response.ok) {
                await response.json();
                return alert.show('Correcto');

            } else {
                return alert.show('Error');
            }
        });
    };
    return <div>{...Some content...}</div>    
}
0
ответ дан 01.12.2019, 22:54