Невозможно изменить кнопку входа для входа во время загрузки с помощью React. js и Bootstrap - PullRequest
Новая
       3

Невозможно изменить кнопку входа для входа во время загрузки с помощью React. js и Bootstrap

0 голосов
/ 04 апреля 2020

Может ли кто-нибудь помочь мне понять, почему мой компонент, показанный ниже, дает сбой с ошибкой:

Слишком много повторных визуализаций. React ограничивает количество рендеров, чтобы предотвратить бесконечность l oop

Я пытаюсь создать компонент, который изменяет надписи на кнопках при щелчке от входа в систему до входа в систему. 

import React, {useState} from 'react';
import {Button, Glyphicon} from 'react-bootstrap';
import "./LoaderButton.css"


export default function LoaderButton({isLoading, className= '', disabled= false, ...props}) {

    const [buttonName, setButtonName] = useState(`${props.children}`)
    buttonName === 'Login' ? setButtonName('Logging in..') : setButtonName(`${props.children}`)

    return (
        <>
            <Button
            className={`LoaderButton ${className}`}
            disabled={disabled || isLoading}
            {...props}
            >
                {isLoading && <Glyphicon glyph="refresh" className="spinning" />} {buttonName}
            </Button>
            <h1>{JSON.stringify(props.children)}</h1>
        </>
    )

}

Обычно это работает: 

import React, {useState} from 'react';
import {Button, Glyphicon} from 'react-bootstrap';
import "./LoaderButton.css"

export default function LoaderButton({isLoading, className= '', disabled= false, ...props}) {

    return (
            <Button
            className={`LoaderButton ${className}`}
            disabled={disabled || isLoading}
            {...props}
            >
                {isLoading && <Glyphicon glyph="refresh" className="spinning" />} {props.children}
            </Button>
    )
}

Как бы вы это написали?

...